Create a super Select plugin that supports Chinese characters, pinyin, and English fast location queries via jquery _jquery

Copy Code code as follows:

Xiaoxiang Blog
Http://blog.csdn.net/fkedwgwy
PHP Technology Group: 37304662
Time: 2010-06-13
Version v3.0.0.0
Any character, Chinese and phonetic integrated query
Arrow keys Select option
Optimize Drop-down box Display effect
jquery Super Select Plugin
$.fn.selectseach = function () {
String.prototype.trim = function () {
Return This.replace (/(^\s*) | ( \s*$)/g, "");
}
Pinyin for Chinese character conversion
function Makepy (str) {
if (typeof (str)!= "string") {
return str;
throw new Error (-1, "need string type parameter!");
}
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 section of code omitted";
var Omultidiff = {
"40840": "YK",
"40863": "QJG"
};
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 a 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 Original Select
Selectobj.each (function () {
if ($ (this). attr (' m ') = = ' Search ') {
$ (this). Hide ();
}
});
Create a 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=" Borde r: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 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"). CSS ({
' Font-size ': Mfont,
' Width ': selectwidth,
});
$ (' #selectcontent '). Show ();
Load option
Createoption (0);
if (IJ <= 8) {
Divheight = ij * 15;
} else {
Divheight = 118;
}
$ ("#selectcontent"). 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 + ' aaaaaaaaaaaaaa ');
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]); Adds one or more new elements to the end of the array and returns the new length of the array
}
}
}
} else {
MyStr = mystr + "No records!";
}
MyStr = mystr + "<input type= ' hidden ' id = ' selectaction ' value = ' 0 ' ></div>";
$ (' #selectdivtree '). Remove ();
$ (' #selectcontent '). HTML (MYSTR);
Selectid =-1;
MyArray = ';
FZRXM1 = ';
FZRXM = ';
alert (Selectgoto);
Movescrollbar (Selectgotoij);
Selectid = Selectgotoij;
Selectgotoij =-10;
Optionhover ();
}
Gets all eligible elements, returned in data type, str: the string to find, container: the array being searched
function getalllikestring (MSTR, container) {
var str = MSTR;
var Startchar = Str.charat (0); Start character
var strLen = str.length; The length of the lookup string
var Curcon;
var isfind = false; Whether to find
var resultindex =-1//If yes, that index
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 match start character, start lookup
{
Strsearch = Curcon.substring (j). substring (0, StrLen);
Strsearch1 = Makepy (strsearch);
if (strsearch = = Str | | strsearch1 = = str)//If the character starting with J matches str, that OK
{
returnvalue = returnvalue + Curcon + "|";
}
}
}
}
if (Returnvalue.length > 1) returnvalue = returnvalue.substring (0, returnvalue.length-1);
var returnvalue = returnvalue.split ("|");
Returnvalue.sort ();
Return returnvalue;
}
Taxonomy Select style Action///////////////////////////////////////////////////////
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"
});
}
$ (this). CSS ({
Background: "#0080FF"
});
},
function () {
if (Getselectvalue (_self.html ())!= $ (' # ' + ObjID). Val ()) {
$ (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 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}, ' slow ');
$ (' #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 ();
});
}
};

How to use:

Copy Code code 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" > Yang Yang Primary school </option>
<option value= "Liuyang" > </option>
</select>

JS Code:

Copy Code code as follows:

$ (document). Ready (function () {
$ (' #sssss '). Selectseach ();
});

Download Address: http://www.jb51.net/jiaoben/27673.html
Always looking for a can be found by pinyin to find the Drop-down box option value Plug-ins, this plug-in one-step all done, but also support editable input box