検索結果の値をクリック時に入力要素に割り当てる方法はありますか？

-1

私はPHPとjQuery開発を初めて使いました。のサンプルインスタント検索を実装しています。
結果をdiv出力に入力して結果を保持していますが、divの結果を目的の検索入力に割り当てることができません。検索結果の値をクリック時に入力要素に割り当てる方法はありますか？

これは私のJavaScriptのである：

function searchq(){ var searchTxt=$("input[name='search']").val(); $.post("test_search_name.php", {searchVal: searchTxt}, function(output) { $("#output").html(output); }); }

私が入力すると、ページのtest_search_name.phpは結果を返しています。
私は結果を見ることができましたが、今度は特定の結果を選択して検索入力に割り当てる必要があります。

これは私のHTMLです：
要するに
<form action="" method="post"> <input type="text" name="search" placeholder="Search" onKeyup="searchq();"/> </form> <div id="output" class = "output">  </div>

、我々はGoogleで検索した場合、我々はその値がに割り当てられた結果を選択するとき、我々は結果を得る（私の場合、私は結果を持っている）と入力（私が達成したいもの）。私はあなたが探して、あなたがspanやAjaxのリターン上のリスト（li）のような選択可能な要素を持っていることを想定しているものを理解していれば

出典

2016-05-27 Santosh Gadhave

'$ .post'でどんな種類の' output'を得ていますか？ –

こんにちはグルプラサード、私は取得していますが、出力でのフォーマットを下回っている：

res2

res4

しかし、私は結果のいずれかをクリックすると、問題は、私はクリックで取得する値は、全体ではなく結果です特定の特定の値を取得するにはどうしたらいいですか？ –

私はあなたが検索ボックスの値をユーザーが結果をクリックするたびに更新するように求めているものを理解してから。

ので、ここであなたはそれを成し遂げることができる方法の簡単なデモである場合：場合

// wait until we can safely manipulate the page. 
$(document).ready(function() { 
    // listen for click events on the results 
    $(".results-container > .result").on("click", function(event) { 
    // update the search box value 
    $(".search-panel > .search-box").val($(this).text()); 
    }); 
});

：ここ

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Selecting Search Results</title> 
    <!-- NOTE: we need jQuery so lets include it --> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 
</head> 
<body> 
    <!-- NOTE: this is your search panel --> 
    <div class="search-panel"> 
    <input type="text" class="search-box"/> 
    </div> 
    <!-- NOTE: this is your results container --> 
    <div class="results-container"> 
    <div class="result">Lorem Ipsum 1</div> 
    <div class="result">Lorem Ipsum 2</div> 
    <div class="result">Lorem Ipsum 3</div> 
    <div class="result">Lorem Ipsum 4</div> 
    <div class="result">Lorem Ipsum 5</div> 
    <div class="result">Lorem Ipsum 6</div> 
    <div class="result">Lorem Ipsum 7</div> 
    <div class="result">Lorem Ipsum 8</div> 
    </div> 
    <!-- NOTE: this simple script updates the search box value --> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $(".results-container > .result").on("click", function(event) { 
     $(".search-panel > .search-box").val($(this).text()); 
     }); 
    }); 
    </script> 
</body> 
</html>

は、検索ボックスの値を更新のjQueryのブレークダウンですバニラJavaScriptを使用して、代わりにこれを使用したいと考えています。

// wait until we can safely manipulate the page. 
document.addEventListener("DOMContentLoaded", function() { 
    // get the results 
    var results = document.querySelectorAll(".results-container > .result"); 
    for(var i = 0; i < results.length; i++) { 
    // listen for click events on the results 
    results[i].addEventListener("click", updateValue); 
    } 
    // this function handles the "click" event 
    function updateValue() { 
    // update the search box value 
    document.querySelector(".search-panel > .search-box").value = (this.textContent || this.innerText); 
    } 
}, false);

また、この機能を実装していませんforループでは、関数をループに入れるのは悪い習慣なので、詳細はthisページを参照してください。

幸運とすべてのベスト。

出典

2016-05-27 04:48:55

貴重な返事をしてくれたマンゴーに感謝します。

res2

res4

しかし、私は結果のいずれかをクリックすると、問題は、私はクリックで取得する値は、全体の結果です：私は取得していますが、出力でのフォーマットを下回っている - 私の場合には特定のものの代わりに、私が値tを割り当てるときo検索フィールド - 特定の値の代わりにすべての値が割り当てられます。お勧めします。 –

、あなただけ.html()を使用してコンテンツを取得し、フィールド内にそれを割り当てることができます質問：

jsFiddle：https://jsfiddle.net/8t4umwuh/

HTML：

<input type="text" name="search" placeholder="Click one of the list items" /> 
<div id="search"> 
    <!-- 
    I am going to assume your results come back in a list 
    If not, something like <span class="trigger">Name 1</span> will also work. 
    --> 
    <ul> 
     <li class="trigger">Name 1</li> 
     <li class="trigger">Name 2</li> 
     <li class="trigger">Name 3</li> 
     <li class="trigger">Name 4</li> 
    </ul> 
</div>

はJavaScript：

$(document).ready(function() { 
    $(this).on("click", ".trigger", function() { 
     var content = $(this).html(); 
     $("input[name='search']").val(content); 
    }); 
});

出典

2016-05-27 04:34:42 Rasclatt

JSFiddleの例である+1を作るのに時間がかかることがあります。また、あなたのon関数の** second **パラメータが何をしているか説明してください。私は3つのパラメータでon関数を見たことはありません。私はこの行について話しています： '$（this）.on（" click "、" .trigger "、function（）{' –

@Mangoこれは私がそれを行う理由です（これはおそらく、ajax経由の動的なリターンです）。：//stackoverflow.com/questions/15090942/私はこれを何度も繰り返したので、今は習慣の力があります。 – Rasclatt

ラスクラット、情報ありがとうございました。私はこれを知らなかった –

検索結果の値をクリック時に入力要素に割り当てる方法はありますか？

答えて

関連する問題