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