通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件

　　//潇湘博客

　　//http://blog.csdn.net/fkedwgwy

　　//PHP 技术群：37304662

　　//时间:2010-06-13

　　//版本 v3.0.0.0

　　//任意字符、中文与拼音综合查询

　　//方向键选择option

　　//优化下拉框显示效果

　　//jquery超级select插件

　　$.fn.selectseach = function() {

　　String.prototype.trim = function() {

　　return this.replace(/(^\s*)|(\s*$)/g, "");

　　}

　　//汉字转拼音

　　function makePy(str) {

　　if (typeof(str) != "string") {

　　return str;

　　//throw new Error(-1,"需要字符串类型参数!");

　　}

　　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 = "这段代码省略";

　　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;

　　//创建 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>';

　　//浏览器判断

　　if ($.browser.mozilla) {

　　inputwidth = selectwidth - 15;

　　} else {

　　inputwidth = selectwidth - 18;

　　}

　　selectsearch();

　　}

　　});

　　// 隐藏 原始select

　　selectobj.each(function() {

　　if ($(this).attr('m') == 'search') {

　　$(this).hide();

　　}

　　});

　　//创建 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;'><img class='selectimg' id=" + imgselect + objid + " src='img/multiselect.gif' title='快速定位' style='vertical-align:middle;'></nobr></div>";

　　if (!$('#' + selectinput + objid).html()) {

　　obj.after(myhtml);

　　selectkeyup(); //添加keyup事件

　　}

　　$('#' + 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();

　　});

　　}

　　//创建 select 下拉 div 容器

　　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();

　　//浏览器判断

　　if ($.browser.mozilla) {

　　selectwidth = selectwidth + 16;

　　} else {

　　selectwidth = selectwidth + 20;

　　}

　　//divheight=$('#'+objid).l;

　　//列表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();

　　//加载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;

　　}

　　//创建 select option

　　function createoption(maction) {

　　objid = obj.attr('id');

　　objid = objid.replace("selectinput", "");

　　//加载select option 数据

　　$('#' + 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();　 //创建一个数组

　　var arr = new 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]); // 将一个或多个新元素添加到数组结尾，并返回数组新长度

　　}

　　}

　　}

　　} 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();

　　}

　　//获取所有符合条件下元素,以数据型式返回,str:要查找的字符串,container:被查的数组

　　function GetAllLikeString(mstr, container) {

　　var str = mstr;

　　var startChar = str.charAt(0); //开始字符

　　var strLen = str.length; //查找符串的长度

　　var curCon;

　　var isFind = false; //是否找到

　　var resultIndex = -1 //如果是的话的那个索引

　　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) //如果匹配起始字符,开始查找

　　{

　　strsearch = curCon.substring(j).substring(0, strLen);

　　strsearch1 = makePy(strsearch);

　　if (strsearch == str || strsearch1 == str) //如果从j开始的字符与str匹配，那ok

　　{

　　returnvalue = returnvalue + curCon + "|";

　　}

　　}

　　}

　　}

　　if (returnvalue.length > 1) returnvalue = returnvalue.substring(0, returnvalue.length - 1);

　　var returnvalue = returnvalue.split("|");

　　returnvalue.sort();

　　return returnvalue;

　　}

　　////分类法选中样式操作///////////////////////////////////////////////////////

　　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; //跳出循环

　　//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;

　　}

　　//移动 option div 滚动条

　　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();

　　});

　　}

　　};

　　<select name="sssss2" id="sssss2" m='search' >

　　<option value="-1">所有学校</option>

　　<option value="139">湾小学</option>

　　<option value="140">阳河小学</option>

　　<option value="141">浏阳市</option>

　　</select>

$(document).ready(function(){

　　$('#sssss').selectseach();

　　});