如何使用ajax實時搜索獲取腳本文本框中的搜索值？

Question

我已經把我所有的代碼放在這裏。我採取一個div TextBoxContainer.When我點擊文本框名稱= DynamicTextBox我得到的是來自數據庫bt的搜索值我不能選擇它，並不能得到它在文本框。

HTML：

<label class="input"> <i class="icon-append fa fa-user"></i> 
<input type="text" required name="product_name" placeholder="product Name" style="margin-bottom:25px;"> 
<b class="tooltip tooltip-bottom-right">Needed to enter product Name</b> </label> 
<lable style="margin-left:60px;"><b>Material Name</b></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<lable><b>Material Quantity</b></label> 
<div id="TextBoxContainer"></div> 
<input id="btnAdd" type="button" value="Add" style="margin-top:20px;margin-left:450px;width:40px;" /> 
<input id="btnGet" type="button" value="DONE" /> 
</br></br></br> 
<input id="anotherTextbox" type="hidden" name="last" /> 
<input id="anotherTextbox1" type="hidden" name="first"/> 
<input type="submit" name="submit" value="Register" class="btn btn-primary"> 
</form> 

JS：

<script> 
function showResult(str) { 

    if (str.length==0) { 
    document.getElementById("livesearch").innerHTML=""; 
    document.getElementById("livesearch").style.border="0px"; 
    return; 
    } 
    if (window.XMLHttpRequest) { 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } else { // code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
     document.getElementById("livesearch").innerHTML=xmlhttp.responseText; 
     document.getElementById("livesearch").style.border="1px solid #A5ACB2"; 
    } 
    } 
    xmlhttp.open("GET","search1.php?q="+str,true); 
    xmlhttp.send(); 
} 
</script> 



<script> 
$(function() { 
    $("#btnAdd").bind("click", function() { 
    var div = $("<div />"); 
    div.html(GetDynamicTextBox("")); 
    $("#TextBoxContainer").append(div); 

    }); 


    $("#btnGet").bind("click", function() { 
    var values = 
     $.map($("input[name=DynamicTextBox]"), function(el) { 
     return el.value 
     }).join(",\n"); 
    $("#anotherTextbox").val(values); 
    }); 
    $("#btnGet").bind("click", function() { 
    var values = 
     $.map($("input[name=DynamicTextBox1]"), function(el) { 
     return el.value 
     }).join(",\n"); 
    $("#anotherTextbox1").val(values); 
    }); 
    $("body").on("click", ".remove", function() { 
    $(this).closest("div").remove(); 
    }); 

}); 

function GetDynamicTextBox(value) { 
    return '<input name = "DynamicTextBox" style="width:280px;margin-left:10px;" id="skills" onkeyup="showResult(this.value)" type="text" value = "' + value + '" />&nbsp;' + '<input style="width:280px;" name = "DynamicTextBox1" type="text" value = "' + value + '" />&nbsp;' + 
    '<span type="button" class="remove glyphicon glyphicon-remove"></span><div id="livesearch" style="width:280px;margin-left:10px;"></div>' 
} 
</script> 

Answer 1

自動完成功能使用戶能夠快速找到和對方輸入的值的預填充的列表中進行選擇，利用搜索並過濾。

在這裏找到鏈接 https://jqueryui.com/autocomplete/#remote

點擊view source讓代碼要使用自動完成