我能夠從 php sql 回傳結果值，但是通過單擊結果值我無法設定輸入值，該怎么做，謝謝。
腳本
$(document).ready(function(){
$('#input').on("keyup input", function(){
var input = $(this).val();
var result = $(this).parent().parent().next(".result");
if(input.length){
$.get("backend-search.php", {term: input}).done(function(data){
result.html(data);
});
} else{
result.empty();
}
});
$(document).on("click", ".result p", function(){
$(this).prev().children().children('input[type="text"]').val($(this).text());
result.empty();
});
});
HTML
<div>
<div>
<ol style="list-style: none;">
<li>
<input id='input' type="text" autocomplete="off" placeholder="Search..." />
</li>
</ol>
<div class="result"></div>
</div>
</div>
uj5u.com熱心網友回復：
假設您的結果集如下所示：
<div class='result'>
<p></p>
<p></p>
<p></p>
</div>
然后，如果您單擊第二個，則通過此選擇器正在執行的操作<p>：
$(this).prev().children().children('input[type="text"]')
.prev()將針對“緊接在前的兄弟姐妹”。對于我們將選擇第一個的示例案例<p>；接下來，在DOM 樹中
.children()搜索that 的子級。您尚未向我們展示該 HTML 的外觀，但很可能它是純文本，沒有子級。即使它有一些（例如），它也不會幫助我們回到，這是錯誤的方向。<p><span><input>
您確實需要首先搜索DOM，直到我們找到包含輸入的內容，然后再回傳。
$(this).parent().parent().find('input')
第一個
.parent()將選擇<div class='result'>;第二個將針對
<div>包含您的輸入和結果的父級；將從該節點向下
.find()搜索以查找輸入；
您可以通過向包含輸入和結果的元素添加一個類來簡化這一點，并使其免受未來 HTML 更改的影響。在評論中您提到您計劃擁有多組，所以也許每個“集合”都可以稱為“搜索”：
<div class='search'>
<ol> ... <input> ... </ol>
<div class='result'> ... </div>
</div>
<div class='search'>
<ol> ... <input> ... </ol>
<div class='result'> ... </div>
</div>
現在使用以下方法更容易定位正確的元素.closest()：
$(this).closest('search').find('input')
uj5u.com熱心網友回復：
$(document).ready(function () {
$("#input").on("keyup input", function () {
var input = $(this).val();
var result = $(this).parent().parent().next(".result");
if (input.length) {
$.get("backend-search.php", {
term: input,
}).done(function (data) {
result.html(data);
});
} else {
result.empty();
}
});
$(document).on("click", ".result p", function () {
var result = $(".result"); //important
$(this)
.prev()
.children()
.children('input[type="text"]')
.val($(this).text());
result.empty();
});
});
我認為添加這行代碼應該可以解決您的問題。
uj5u.com熱心網友回復：
您可以使用以下代碼從結果中獲取值并將其放入輸入中。
$(document).on("click", ".result", function(){
$('#input').val($('.result').text());
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/477637.html
標籤：javascript php html jQuery
下一篇：正則運算式驗證數字和字母