自己寫的select元素可編輯、可篩選JQuery外掛程式 jquery.inputselectbox.js

標籤：des   style   blog   http   io   ar   os   使用   sp   

/* 功能：實現對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);

　　http://files.cnblogs.com/wileywong/jquery.inputselectbox.js

 另外JQuery也有一款外掛程式可以實現jquery.flexselect.js。

自己寫的select元素可編輯、可篩選JQuery外掛程式 jquery.inputselectbox.js