Use jQuery to create a super select plug-in that supports Chinese characters, Pinyin, and English quick locating and query

Copy codeThe Code is as follows:
// Xiaoxiang blog
// Http://blog.csdn.net/fkedwgwy
// PHP Group: 37304662
// Time: 2010-06-13
// V3.0.0.0
// Comprehensive query of any characters, Chinese characters, and Pinyin
// Select option as the direction key
// Optimize the Display Effect of the drop-down list
// Jquery Super select plug-in
$. Fn. selectseach = function (){
String. prototype. trim = function (){
Return this. replace (/(^ \ s *) | (\ s * $)/g ,"");
}
// Convert Chinese characters to PinYin
Function makePy (str ){
If (typeof (str )! = "String "){
Return str;
// Throw new Error (-1, "a string type parameter is required! ");
}
Var arrResult = new Array ();
For (var I = 0, len = str. length; I <len; I ++ ){
Var ch = str. charAt (I );
ArrResult. push (checkCh (ch ));
}
Var resarr = mkRslt (arrResult );
Return resarr. join (""). toLowerCase ();
}
Function checkCh (ch ){
Var uni = ch. charCodeAt (0 );
If (uni> 40869 | uni <19968) return ch; // dealWithOthers (ch );
Return (oMultiDiff [uni]? OMultiDiff [uni]: (strChineseFirstPY. charAt (uni-19968 )));
}
Function mkRslt (arr ){
Var arrRslt = [""];
For (var I = 0, len = arr. length; I <len; I ++ ){
Var str = arr [I];
Var strlen = str. length;
If (strlen = 1 ){
For (var k = 0; k <arrRslt. length; k ++ ){
ArrRslt [k] + = str;
}
} Else {
Var tmpArr = arrRslt. slice (0 );
ArrRslt = [];
For (k = 0; k <strlen; k ++ ){
Var tmp = tmpArr. slice (0 );
For (var j = 0; j <tmp. length; j ++ ){
Tmp [j] + = str. charAt (k );
}
ArrRslt = arrRslt. concat (tmp );
}
}
}
Return arrRslt;
}
Var strChineseFirstPY = "this code is omitted ";
Var oMultiDiff = {
"40840": "YK ",
& Quot; 40863 & quot;: & quot; QJG & quot"
};
Var teststr;
Var selectobj = $ (this );
Var obj;
Var obj1;
Var mfont = 12;
Var selectleft;
Var selecttop;
Var selectwidth;
Var objid;
Var objvalue;
Var objhtml;
Var inputwidth;
Var selectinput = 'selectinput ',
Selectinputname = 'selectinputname ',
Imgselect = 'imgselect ',
Myhtml, objid;
Var recno;
Var fzrxm1 = "";
Var fzrxm = "";
Var selectid =-1;
Var mfocus = 1;
Var ij, selectgotoij =-10;
// Create select div
Selectobj. each (function (){
Obj = $ (this );
Var check = obj. attr ('M ');
// Alert (check );
If (check = 'search '){
Mfont = 12;
Selectleft = obj. offset (). left;
Selecttop = obj. offset (). top;
Selectwidth = obj. width ();
Objid = obj. attr ('id ');
Objvalue = obj. val ();
Objhtml = obj. find ('option: selected'). text ();
Teststr = teststr + 'left = '+ selectleft +' and top = '+ selecttop +' <br> ';
// Browser judgment
If ($. browser. mozilla ){
Inputwidth = selectwidth-15;
} Else {
Inputwidth = selectwidth-18;
}
Selectsearch ();
}
});
// Hide the original select
Selectobj. each (function (){
If ($ (this). attr ('M') = 'search '){
$ (This). hide ();
}
});
// Create select div
Function selectsearch (){
Myhtml = "<div id =" + selectinput + objid + "style = 'height: 18px; color: white; background: white; font-size: 12; left: "+ selectleft +"; top: "+ selecttop + "; '> <nobr> <input type = 'text' name = "+ selectinputname + objid +" id = "+ selectinputname + objid +" style = 'border: 1px solid # CCC; margin: 0pt 0px 0pt 0px; font-size: "+ mfont +"; vertical-align: middle; '> </nobr> </div> ";
If (! $ ('#' + Selectinput + objid).html ()){
Obj. after (myhtml );
Selectkeyup (); // Add a keyup event
}
$ ('#' + Selectinput + objid).css ({
// 'Left': selectleft,
// 'Top': selecttop,
'Font-size': mfont,
'Width': inputwidth
});
$ ('#' + Selectinputname + objid).css ({
'Width': inputwidth
});
$ ('#' + Selectinputname + objid). val (objhtml );
$ ('#' + Selectinputname + objid). focus (function (){
Var myid;
Myid = $ (this). attr ('id ');
Objid = myid. replace ("selectinputname ","");
Obj = $ ('#' + selectinput + objid );
});
/* $ ('#' + Imgselect + objid). click (function (){
Var myid;
Myid = $ (this). attr ('id ');
Objid = myid. replace ("imgselect ","");
Obj = $ ('#' + selectinput + objid );
Creatediv ();
// Alert (1 );
});*/
$ ('#' + Selectinputname + objid). blur (function (){
Var myid;
Myid = $ (this). attr ('id ');
Objid = myid. replace ("selectinputname ","");
$ ('#' + Selectinputname + objid). val ($ ('#' + objid). find ('option: selected'). text ());
$ ('#' + Imgselect + objid). attr ("src", "img/multiselect.gif ");
// $ ('# Selectcontent'). remove ();
// Creatediv ();
// Alert (obj. val ());
});
$ ('#' + Selectinput + objid). show ();
// $ ('#' + Selectinputname + objid). focus ();
$ ('#' + Selectinput + objid). hover (
Function (){
Obj = $ (this );
Creatediv ();
},
Function (){
Objid = $ (this). attr ('id ');
Objid = objid. replace ("selectinput ","");
$ ('#' + Selectinputname + objid). val ($ ('#' + objid). find ('option: selected'). text ());
$ ('#' + Imgselect + objid). attr ("src", "img/multiselect.gif ");
$ ('# Selectcontent'). remove ();
});
}
// Create a select drop-down div container
Function creatediv (){
Var divheight;
Objid = obj. attr ('id ');
Objid = objid. replace ("selectinput ","");
$ ('. Selectimg'). attr ("src", "img/multiselect.gif ");
// Objid = $ (this). attr ('id ');
$ ('#' + Imgselect + objid). attr ("src", "img/multiselect-hover.gif ");
$ ('#' + Selectinputname + objid). focus ();
Selectwidth = obj. width ();
// Browser judgment
If ($. browser. mozilla ){
Selectwidth = selectwidth + 16;
} Else {
Selectwidth = selectwidth + 20;
}
// Divheight = $ ('#' + objid). l;
// List div
Var myhtml1 = "<div id = 'selectcontent' style = 'height: 118px; position: absolute; border: 1px solid # CCC; background: white; font-size: 12; overflow-x: hidden; overflow-y: auto; margin:-1.5pt 0px 0pt 0px; display: none '> </div> ";
$ ('# Selectcontent'). remove ();
Obj. append (myhtml1 );
$ ("# Selectcontent" detail .css ({
'Font-size': mfont,
'Width': selectwidth,
});
$ ('# Selectcontent'). show ();
// Load option
Createoption (0 );
If (ij <= 8 ){
Divheight = ij * 15;
} Else {
Divheight = 118;
}
$ ("# Selectcontent" detail .css ({
'Height': divheight,
});
}
Function arraycheck (objs, mystr ){
For (var I = 0; I <objs. length; I ++ ){
If (objs [I] = mystr ){
Return false;
}
}
Return true;
}
// Create select option
Function createoption (maction ){
Objid = obj. attr ('id ');
Objid = objid. replace ("selectinput ","");
// Load select option data
$ ('#' + Objid). find ('option'). each (function (){
Fzrxm1 = fzrxm1 + $ (this). val () + "| ";
Fzrxm = fzrxm + $ (this). text () + "| ";
});
Var mystr = '',
Selectgoto = $ ('#' + selectinputname + objid). val (),
Selectstyle = '',
Seachstr = '';
// Alert (fzrxm1.length );
Var myarray = new Array (); // create an Array
Var arr = new Array (); // create an Array
Fzrxm = fzrxm + '';
Arr = fzrxm. split ('| ');
Seachstr = $ ('# selectinputname' + objid). val ();
// Alert (seachstr );
// Seachstr = objvalstr;
// ('{Msg1'{.html (seachstr + 'aaaaaaaaaaaaaaa ');
If (seachstr! = '') & (Seachstr! = 'Undefined ')){
If (maction = 1 ){
Var rval = GetAllLikeString (seachstr, arr );
}
If (maction = 0 ){
Var rval = arr;
}
} Else {
Var rval = arr;
}
Mystr = "<div id = 'selectdivtree' style = 'width: 96.9%; border: 0px solid # CCC; margin: 2pt 0px 0pt 2px; color: #000000 '> ";
Ij = 0;
Recno = rval. length;
// Alert (recno );
If (rval! = ''){
For (var I = 0; I <recno; I ++ ){
If (arraycheck (myarray, rval [I]) {
If (rval [I]! = '') & (Rval [I]! = 'Null ')){
Ij = ij + 1;
If (selectgoto = rval [I]) {
Selectgotoij = ij;
Selectstyle = "background: # 0080FF ;";
}
Mystr = mystr + "<div style = 'height: 14px; "+ selectstyle +" 'class = 'selectclassdiv 'id = 'selectclassdiv "+ ij +" 'rel =' "+ ij +" '> "+ rval [I] +" </div> ";
Selectstyle = '';
Myarray. push (rval [I]); // Add one or more new elements to the end of the array and return the new length of the array.
}
}
}
} Else {
Mystr = mystr + "No records! ";
}
Mystr = mystr + "<input type = 'den den 'id = 'selectaction' value = '0'> </div> ";
$ ('# Selectdivtree'). remove ();
Parameters ('{selectcontent'{.html (mystr );
Selectid =-1;
Myarray = '';
Fzrxm1 = '';
Fzrxm = '';
// Alert (selectgoto );
MoveScrollbar (selectgotoij );
Selectid = selectgotoij;
Selectgotoij =-10;
Optionhover ();
}
// Obtain all elements that meet the conditions and return the data type. str: string to be searched, container: queried Array
Function GetAllLikeString (mstr, container ){
Var str = mstr;
Var startChar = str. charAt (0); // start character
Var strLen = str. length; // The length of the search string
Var curCon;
Var isFind = false; // whether to find
Var resultIndex =-1 // The index if yes
Var returnvalue = "";
For (var I = 0; I <container. length; I ++ ){
CurCon = container [I];
For (var j = 0; j <curCon. length; j ++ ){
// Alert (curCon. charAt (j ));
Curstr = curCon. charAt (j );
If (curstr = startChar | makePy (curstr) = startChar) // if the start character matches, start searching
{
Strsearch = curCon. substring (j). substring (0, strLen );
Strsearch1 = makePy (strsearch );
If (strsearch = str | strsearch1 = str) // if the character starting from j matches str, OK
{
Returnvalue = returnvalue + curCon + "| ";
}
}
}
}
If (returnvalue. length> 1) returnvalue = returnvalue. substring (0, returnvalue. length-1 );
Var returnvalue = returnvalue. split ("| ");
Returnvalue. sort ();
Return returnvalue;
}
//// Type Selected style operation //////////////////////////////// ///////////////////////
Function optionhover (){
Objid = obj. attr ('id ');
Objid = objid. replace ("selectinput ","");
Var mform = $ ('# selectdivtree ');
Mform. find ('. selectclassdiv'). each (function (){
Var _ self = $ (this );
_ Self. click (function (){
// Alert (obj. val ());
Setval(_self.html ());
$ ('#' + Objid). change ();
$ ('# Selectcontent'). hide ();
$ ('. Selectimg'). attr ("src", "img/multiselect.gif ");
});
_ Self. hover (
Function (){
If (getselectvalue(_self.html ())! = $ ('#' + Objid). val ()){
Mform.find('.selectclassdiv').css ({
Background: "White"
});
}
Certificate (this).css ({
Background: "# 0080FF"
});
},
Function (){
If (getselectvalue(_self.html ())! = $ ('#' + Objid). val ()){
Certificate (this).css ({
Background: "White"
});
}
});
});
}
Function getselectvalue (str ){
Objid = obj. attr ('id ');
Objid = objid. replace ("selectinput ","");
Var myid = '';
$ ('#' + Objid). find ('option'). each (function (){
If (str = $ (this). text ()){
Myid = $ (this). val ();
Return false; // jump out of the loop
// Alert (myid );
//
}
});
Return myid;
}
Function setval (selfhtml ){
Objid = obj. attr ('id ');
Objid = objid. replace ("selectinput ","");
// Alert (selfhtml );
If ($ ('# selectcontent'). length = 0 ){
Return false;
}
$ ('#' + Objid). attr ('value', getselectvalue (selfhtml ));
$ ('#' + Selectinputname + objid). val (selfhtml );
};
Function getTop (idx ){
Var mfontsize;
Return idx * 14-23;
}
// Move the option div scroll bar
Function moveScrollbar (idx ){
If (idx <1 ){
Return false;
}
If (idx> ij ){
Return false;
}
Var t = getTop (idx );
Var ch = $ ('# selectcontent'). scrollHeight;
$ ('# Selectcontent'). attr ("scrollTop", t );
// $ ('# Selectcontent'). animate ({scrollTop: t}, 'low ');
$ ('# Selectaction'). val ($ ("# selectclassdiv" + idx). attr ('rel '));
Setval ($ ("# selectclassdiv" + idx).html ());
}
Function selectkeyup (){
$ ('#' + Selectinputname + objid). keyup (function (event ){
// Alert (ij );
If (ij <selectid ){
Selectid = 0;
// Return false;
};
If (selectid <1 ){
Selectid = 0;
// Return false;
};
Mfocus = 1;
Switch (event. keyCode ){
Case 37:
{
Mfocus = 0;
Creatediv ();
$ ("# Selectclassdiv" + selectid).css ({
Background: "White"
});
Selectid = selectid-1;
MoveScrollbar (selectid );
$ ("# Selectclassdiv" + selectid).css ({
Background: "# 0080FF"
});
Break;
}
Case 39:
{
Mfocus = 0;
Creatediv ();
$ ("# Selectclassdiv" + selectid).css ({
Background: "White"
});
Selectid = selectid + 1;
MoveScrollbar (selectid );
$ ("# Selectclassdiv" + selectid).css ({
Background: "# 0080FF"
});
Break;
}
Case 40:
{
Mfocus = 0;
$ ("# Selectclassdiv" + selectid).css ({
Background: "White"
});
Selectid = selectid + 1;
MoveScrollbar (selectid );
$ ("# Selectclassdiv" + selectid).css ({
Background: "# 0080FF"
});
Break;
}
Case 38:
{
Mfocus = 0;
Creatediv ();
$ ("# Selectclassdiv" + selectid).css ({
Background: "White"
});
Selectid = selectid-1;
MoveScrollbar (selectid );
$ ("# Selectclassdiv" + selectid).css ({
Background: "# 0080FF"
});
Break;
}
Case 13:
{
Mfocus = 0;
Creatediv ();
Setval ($ ("# selectclassdiv" + selectid#.html ());
$ ('#' + Objid). change ();
$ ('# Selectcontent'). hide ();
$ ('. Selectimg'). attr ("src", "img/multiselect.gif ");
Break;
}
Case 9:
{
Mfocus = 0;
$ ('# Selectcontent'). remove ();
Break;
}
}
If (mfocus = 1 ){
Creatediv ();
Createoption (1 );
};
});
$ ('#' + Selectinputname + objid). click (function (){
$ ('#' + Selectinputname + objid). select ();
});
}
};

Usage:
Copy codeThe Code is as follows:
<Select name = "sssss2" id = "sssss2" m = 'search'>
<Option value = "-1"> all schools </option>
<Option value = "139"> Bay Primary School </option>
<Option value = "140"> Yanghe Primary School </option>
<Option value = "141"> Liuyang City </option>
</Select>

JS Code:

Copy codeThe Code is as follows: $ (document). ready (function (){
$ ('# Ssss'). selectseach ();
});

: Http://www.jb51.net/jiaoben/27673.html
I always wanted to find a plug-in that can use Pinyin to find the optIOn value in the drop-down box. This plug-in has been fully implemented in one step and supports editable input boxes.