Write your own Select element editable, filterable jquery plugin Jquery.inputselectbox.js

/* Function: Implements the function that can be entered on the Select drop-down box, and dynamically filters the contents of the drop-down box when entering. Parameters: The default display of text when no value is selected how to use: $ ("#firstLevel"). Inputselectbox ("---Please select--"); How to get the selected item: Directly using the original select element, the value is synchronized to the original element after the drop-down box is hidden */(function ($) {$.fn.inputselectbox = function (Emptytext) {if (!e Mptytext) Emptytext = ""; Parameter default value: Used to populate when the input box is empty when the value var Blurflag = true; To indicate whether you want to hide the drop-down selection box, Hideselectlist will judge this identity (it cannot be hidden when the focus is in the input box and in the drop-down selection box.)        Other scenes are hidden). The role of this identity is for example: input loses focus, supposedly hides the drop-down box, but as the drop-down box gets focus, the event that the drop-down box receives focus blocks the request to hide the drop-down box.        1. Hide the original select element var sel = $ (this);        Sel.hide (); 2. Create the necessary object//input box var input = $ ("<input type= ' text ' style= ' width:" + (Sel.width ()-4) + "px" &GT;&LT;/INP        Ut> "); Drop-down selection box var selectlist = $ ("<select style= ' width:" + sel.width () + "px ' size= ' >" + sel.html () + "</sele        Ct> ");        3.input in the original select Input.insertbefore (SEL);        Bind an event Input.click (function () {selectlist.show () to input; }). focus (function () {//Get focus, show drop-down selectionSelect frame Input.select ();            Blurflag = false; Selectlist.css ({"position": "Absolute", "left": Input.offset (). Left + "px", "Top": (Input.offset (). Top +        Input.outerheight ()) + "px"}). Show (); }). blur (function () {//loses focus, hides drop-down selection box.            Note that if the mouse is moved to the drop-down selection box at this point, Blurflag = true is not hidden; Window.settimeout (function () {hideselectlist (' Input.blur ');}, 50);            The reason for the settimeout is that it is possible for the user to move the mouse between the input box and the drop-down selection box, which gives a buffer of the time difference, the same as}). 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 = =) return;//non-input key, combination key, here directly ignore//input text, drop-down selection box content following change switch (e.keycode) {C                ASE 38://Up button break;                Case 40://down button break; Case 13://Enter: OK select blurflag = true;                    Window.settimeout (function () {hideselectlist ();}, 50);                Break                    Default:quickfilter (Input.val ());            Break                     }}). KeyDown (function (e) {//Enter text, the contents of the drop-down selection box follow the change switch (e.keycode) {Case 38:                    Up button selectlist.show ();                    Selectlist.get (0). selectedindex--;                    Input.val (Selectlist.find ("option:selected"). Text ());                Break                    Case 40://Down button selectlist.show ();                    Selectlist.get (0). selectedindex++;                    Input.val (Selectlist.find ("option:selected"). Text ());                Break            Default:break;        }        });   4. Drop-down selection box: A new 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. The input box is initialized and if the original select has a selection value, the IF (selectlist.get (0) is initialized here. SelectedIndex >= 0) {input.val (selectlist.find            ("option:selected"). Text ());        Input.data ("Selectvalue", selectlist.val);            } else {input.val (emptytext);        Input.data ("Selectvalue", "" "); }//Common function: Hides the drop-down selection box.            Before calling this function, you need to assign a value of Blurflag to true. Parameter: Used to print out where to call this method 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);            Determines whether the input text exists in the dropdown selection var options = sel.find ("option");            var inputvalidflag = false;                    for (var i = 0; i < options.length; i++) {if ($ (options[i]). Text () = = Inputvalue) {                    The value in input is present in the drop-down box, the options selected for the drop-down box, the original select, and the input value Inputvalidflag = true;                    Selectlist.find ("option"). Removeattr ("selected");    Selectlist.find ("option[value=" + $ (options[i]). Val () + "']"). attr ("Selected", "Selected");                    Select the entry sel.find ("option") for the drop-down box. Removeattr ("selected");           Sel.find ("option[value=" + $ (options[i]). Val () + "']"). attr ("Selected", "Selected"); Select the input entry for the original select//Assign Value Input.val (Selectlist.find ("option:selected") to the input field. Text ())                    ; Input.dATA ("Selectvalue", Selectlist.val ());                Break                }} The value in//input does not exist in the drop-down box: input Displays the default value Emptytext, and restores the drop-down box to display all option if (!inputvalidflag) {                Input.val (Emptytext);            Quickfilter (""); }}//Common function: Filter option in Select when entering in input. Parameter: Input text function Quickfilter (val) {if (Val.length = = 0 | | val = = emptytext) {sel                Ectlist.html (sel.html ());            Return            }//algorithm: A word A word comparison, more stupid, if there is a better way to modify the 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 ())); /current option contains text entered by input, option is added to the drop-down box}}}) (JQuery);

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

In addition jquery also has a plug-in can be implemented jquery.flexselect.js.

Write your own Select element editable, filterable jquery plugin Jquery.inputselectbox.js