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>