自己写的select元素可编辑、可筛选JQuery插件 jquery.inputselectbox.js

/*
 功能：实现对select下拉框可输入的功能， 输入时会对下拉框的内容进行动态过滤。
 参数：没有选择任何值时默认显示的文字
 如何使用：$("#firstLevel").inputSelectBox("--请选择--");
 如何获取选择的项：直接使用原始的select元素即可，值会在下拉框隐藏后同步到原始元素
*/
(function ($) {
    $.fn.inputSelectBox = function (emptyText) {
        if (!emptyText) emptyText = ""; //参数默认值：用来填充当输入框input中为空时的值
        var blurFlag = true; //用来表示是否要隐藏下拉选择框，hideSelectList会判断此标识（当焦点在input输入框，在下拉选择框里时，不能隐藏。其他场景时隐藏）.此标识的作用例如：input失去焦点，按理应该隐藏下拉框，但随着下拉框获取焦点，这时下拉框获得焦点的事件就阻止了隐藏下拉框的请求。

        //1.隐藏原来的select元素
        var sel = $(this);
        sel.hide();

        //2.创建必要的对象
        //输入框
        var input = $("<input type=‘text‘ style=‘width:" + (sel.width() - 4) + "px‘></input>");
        //下拉选择框
        var selectList = $("<select style=‘width:" + sel.width() + "px‘ size=‘10‘>" + sel.html() + "</select>");

        //3.input在原来select处
        input.insertBefore(sel);
        //给input绑定事件
        input.click(function () {
            selectList.show();
        }).focus(function () {
            //获得焦点，显示下拉选择框
            input.select();
            blurFlag = false;
            selectList.css({ "position": "absolute", "left": input.offset().left + "px", "top": (input.offset().top + input.outerHeight()) + "px" }).show();
        }).blur(function () {
            //失去焦点，隐藏下拉选择框。注意，如果此时鼠标移到了下拉选择框，则不隐藏
            blurFlag = true;
            window.setTimeout(function () { hideSelectList(‘input.blur‘); }, 50); //setTimeout的原因是可能用户在输入框、下拉选择框间移动鼠标，这里给一个时间差的缓冲，下同
        }).keyup(function (e) {
            //console.log(e.keyCode);
            if (e.ctrlKey || e.altKey || e.shiftKey ||
                e.keyCode == 20 || e.keyCode == 16 || e.keyCode == 17 || e.keyCode == 18 || e.keyCode == 91 || e.keyCode == 93 || e.keyCode == 35 || e.keyCode == 36) return;//非输入键、组合键，这里直接忽略
            //输入文字时，下拉选择框的内容跟随变化
            switch (e.keyCode) {
                case 38:
                    //向上按钮
                    break;
                case 40:
                    //向下按钮
                    break;
                case 13:
                    //回车：确定选择
                    blurFlag = true;
                    window.setTimeout(function () { hideSelectList(); }, 50);
                    break;
                default:
                    quickFilter(input.val());
                    break;
            }
        }).keydown(function (e) {
            //输入文字时，下拉选择框的内容跟随变化
            switch (e.keyCode) {
                case 38:
                    //向上按钮
                    selectList.show();
                    selectList.get(0).selectedIndex--;
                    input.val(selectList.find("option:selected").text());
                    break;
                case 40:
                    //向下按钮
                    selectList.show();
                    selectList.get(0).selectedIndex++;
                    input.val(selectList.find("option:selected").text());
                    break;
                default:
                    break;
            }
        });

        //4.下拉选择框：一个新的select
        selectList.appendTo("body");
        selectList.hide();
        selectList.focus(function () {
            blurFlag = false;
        }).blur(function () {
            blurFlag = true;
            window.setTimeout(function () { hideSelectList(‘selectList.blur‘); }, 50);
        }).click(function () {
            input.val($(this).find("option:selected").text());
            blurFlag = true;
            window.setTimeout(function () { hideSelectList(‘selectList.change‘); }, 50);
        });

        //5.输入框初始化，如果原select有选择值，这里会初始化
        if (selectList.get(0).selectedIndex >= 0) {
            input.val(selectList.find("option:selected").text());
            input.data("selectValue", selectList.val);
        } else {
            input.val(emptyText);
            input.data("selectValue", "");
        }

        //公用函数：隐藏下拉选择框。 调用此函数前，需要为blurFlag赋值为true.参数：测试用，用来打印出在哪里调用的此方法
        function hideSelectList(str) {
            if (!blurFlag) return;
            if (selectList.css("display") == "none") return;
            //console.log("aa:" + str);
            selectList.hide();
            var inputValue = input.val();
            //console.log("inputValue:" + inputValue);
            //判断输入的文字是否在下拉选择中存在
            var options = sel.find("option");
            var inputValidFlag = false;
            for (var i = 0; i < options.length; i++) {
                if ($(options[i]).text() == inputValue) {
                    //input中的值在下拉框中是存在的，给下拉框、原始Select置选中的options，为input赋值
                    inputValidFlag = true;
                    selectList.find("option").removeAttr("selected");
                    selectList.find("option[value=‘" + $(options[i]).val() + "‘]").attr("selected", "selected");    //将下拉框选中输入的项
                    sel.find("option").removeAttr("selected");
                    sel.find("option[value=‘" + $(options[i]).val() + "‘]").attr("selected", "selected");           //将原始select选中输入的项
                    //给输入框input赋值
                    input.val(selectList.find("option:selected").text());
                    input.data("selectValue", selectList.val());
                    break;
                }
            }
            //input中的值在下拉框中不存在：input显示默认值emptyText，并把下拉框中恢复显示所有option
            if (!inputValidFlag) {
                input.val(emptyText);
                quickFilter("");
            }
        }

        //公用函数：在input中输入时过滤select中的option. 参数：input中输入的文字
        function quickFilter(val) {
            if (val.length == 0 || val == emptyText) {
                selectList.html(sel.html());
                return;
            }
            //算法：一个字一个字的比较，比较笨，如果有更好的办法可以修改
            var arr = new Array();
            for (var i = 0; i < val.length; i++) {
                arr[i] = val.substr(i, 1);
            }
            var options = sel.find("option");
            selectList.empty();
            for (var i = 0; i < options.length; i++) {
                var filterFlag = true;
                for (var j = 0; j < arr.length; j++) {
                    if ($(options[i]).text().indexOf(arr[j]) < 0) {
                        filterFlag = false;
                    }
                    if (filterFlag == false) break;
                }
                if (filterFlag) selectList.append($($("<div></div>").append($(options[i]).clone()).html()));//当前option包含了input输入的文字，将option加入到下拉框中
            }
        }
    }
})(jQuery);