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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <input type="text" name="batch" placeholder="设备号" class="form-control" id="batch"  list="batch_list" autocomplete="off">
 9 <!-- 选择内容 -->
10 <datalist id="batch_list">
11 </datalist>
12 <!-- 动态加载选择的内容 -->
13 <script>
14     $('input#batch').bind('keyup', function () {
15         var batch = $('input#batch').val();
16         $.ajax({
17             url: "/search_batch/",
18             type: "GET",
19             dataType: 'json',
20             data: {'batch': batch},
21             async: false,
22             success: function (arg) {
23                 $('datalist#batch_list').empty();
24                 for (var i = 0; i < arg.length; i++) {
25                     var add_options = '<option value="' + arg[i] + '">'+ arg[i] + '</option>';
26                     $('datalist#batch_list').append(add_options);
27                 }
28             }
29         })
30     });
31 </script>
32 </body>
33 </html>

注意：

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

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

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

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