Javascript 如何使用ajax live search在脚本文本框中获取搜索值？

我把所有的代码都放在这里了。我拿了一个div TextBoxContainer，当我点击textbox name=DynamicTextBox时，我从数据库中获取了搜索值，但我无法选择它，也无法在textbox上获取它

html:

js:

---

Autocomplete使用户能够在键入值时快速查找并从预先填充的值列表中进行选择，从而利用搜索和筛选

在这里找到链接

---

单击查看源代码以获取代码

是否要使用自动完成？如果可以，我随时准备使用任何东西。。

<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>

  <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>