https://github.com/zhaobao1830/jquery-editable-select 下載地址
示例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表單</title> <script type="application/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="Jquery/jquery-2.1.0.min.js"></script> <script type="text/javascript" src="Jquery/jquery-editable-select.js"></script> <link rel="stylesheet" href="Jquery/jquery-editable-select.css"> </head> <body> <span>數據來源</span> <select class="source" id="depart"> <option value="0">人工導入1</option> <option value="1">人工導入2</option> <option value="2">數據服務平台1</option> <option value="3">數據服務平台2</option> <option value="4">數據服務平台3</option> <option value="5">數據服務平台4</option> <option value="6">數據服務平台5</option> <!--用於存儲選擇的ID值--> <input type="text" hidden id="depart_id"> </select> <input type="button" class="btn btn-default" id="btnc" value="獲取數據"> <script type="text/javascript"> //帶輸入框的下拉框 // $("#depart").editableSelect({ // filter: true, // //bg_iframe:true, // //effects: 'fade', // case_sensitive: false, // }).on("select.editable-select", function (e, li) { // var dataValue = li.attr("data-value"); // $("#depart_id").val(li.val()); // }); $("#depart").editableSelect({ filter: true, //bg_iframe:true, //effects: 'fade', case_sensitive: false, }).on("select.editable-select", function (e, li) { //選擇后執行的事件 console.log(li); console.log(li.val()); $("#depart_id").val(li.val()); });; $("#depart").prop("placeholder", "==請輸入或選擇=="); $('#btnc').on('click',function () { var tx= $('#depart_id').val(); console.log(tx); alert(tx); }); </script> </body> </html>