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


Posted in Javascript onJune 18, 2010
//潇湘博客 
//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>

JS代码:
$(document).ready(function(){ 
$('#sssss').selectseach(); 
});

下载地址: https://3water.com/jiaoben/27673.html
一直想找一个可以通过拼音来查找下拉框optIOn值的插件,,这款插件一步到位全做到了,而且还支持可编辑的输入框
Javascript 相关文章推荐
广告显示判断
Aug 31 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
jquery ready()的几种实现方法小结
Jun 18 #Javascript
JQuery在光标位置插入内容的实现代码
Jun 18 #Javascript
JavaScript Chart 插件整理
Jun 18 #Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 #Javascript
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 #Javascript
js打印纸函数代码(递归)
Jun 18 #Javascript
jquery 弹出层注册页面等(asp.net后台)
Jun 17 #Javascript
You might like
php通过ajax实现双击table修改内容
2014/04/28 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Python列表append和+的区别浅析
2015/02/02 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
几个Linux面试题笔试题
2012/12/01 面试题
服装厂厂长岗位职责
2013/12/27 职场文书
档案检查欢迎词
2014/01/13 职场文书
九年级物理教学反思
2014/01/29 职场文书
出生证明公证书
2014/04/09 职场文书
2014年学前班工作总结
2014/12/08 职场文书
三八妇女节慰问信
2015/02/14 职场文书
学生逃课检讨书
2015/02/17 职场文书
办公室岗位职责范本
2015/04/11 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
一篇文章带你复习java知识点
2021/06/28 Java/Android
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
python文件与路径操作神器 pathlib
2022/04/01 Python