下拉选择框，允许手动输入和过滤

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>