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框架。
