input框动态模糊查询，能输入，能选择

<input type="text" name="batch" placeholder="设备号" class="form-control" id="batch"  list="batch_list" autocomplete="off">
 <!-- 选择内容 -->
 <datalist id="batch_list">
</datalist>
 <!-- 动态加载选择的内容 -->
 <script>
     $('input#batch').bind('keyup', function () {
         var batch = $('input#batch').val();
         $.ajax({
           url: "/search_batch/",
           type: "GET",
        dataType: 'json',
         data: {'batch': batch},
          async: false,
          success: function (arg) {
               $('datalist#batch_list').empty();
              for (var i = 0; i < arg.length; i++) {
                 var add_options = '<option value="' + arg[i] + '">'+ arg[i] + '</option>';
                $('datalist#batch_list').append(add_options);
              }
       }
      })
  });
</script>

注意：

1、 关闭输入框的历史记录功能 ，autocomplete="off"。否则会将用户的输入历史记录也显示出来。

2、datalist标签的id要与input标签的list属性的值一致。

3、动态获取input的输入值，给input标签绑定“keyup”事件。

4、本实例使用了jQuery和bootstrap框架。