通过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 + " + selectleft + ";top:" + selecttop + ";'><nobr><input type='text' name=" + selectinputname + objid + " id=" + selectinputname + objid + " + mfont + ";vertical-align:middle;'><img id=" + imgselect + objid + " src='img/multiselect.gif' title='快速定位'></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'></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'>";

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 + selectstyle + " ' 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>

JS代码:

复制代码代码如下:$(document).ready(function(){

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

});

下载地址： http://www.jb51.net/jiaoben/27673.html

一直想找一个可以通过拼音来查找下拉框optIOn值的插件,，这款插件一步到位全做到了,而且还支持可编辑的输入框