通过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 相关文章推荐
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
js滚动条平滑移动示例代码
Mar 29 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
使用Angular CLI生成路由的方法
Mar 24 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
JS实现简单日历特效
Jan 03 Javascript
javascript之Object.assign()的痛点分析
Mar 03 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 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自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
百度地图api如何使用
2015/08/03 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
jQuery实现增删改查
2020/12/22 jQuery
python实现的各种排序算法代码
2013/03/04 Python
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
不要用强制方法杀掉python线程
2017/02/26 Python
python制作简单五子棋游戏
2019/06/18 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
django中嵌套的try-except实例
2020/05/21 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
超市后勤自我鉴定
2014/01/17 职场文书
商场消防安全责任书
2014/07/29 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
银行授权委托书样本
2014/10/13 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
论文致谢词范文
2015/05/14 职场文书
家长意见书
2015/06/04 职场文书
创业计划之特色精品店
2019/08/12 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript