/* 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" ></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