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