如何使用 ajax 实时搜索获取脚本文本框中的搜索值

我把我所有的代码都放在这里。当我单击文本框名称 = 动态文本框时，我从数据库 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>