通过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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
vue二级路由设置方法
Feb 09 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
原生js实现俄罗斯方块
Oct 20 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
再次研究下cache_lite
2007/02/14 PHP
完美解决PHP中文乱码
2009/11/26 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
跟老齐学Python之折腾一下目录
2014/10/24 Python
Python找出9个连续的空闲端口
2016/02/01 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
对python中dict和json的区别详解
2018/12/18 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
python爬虫 requests-html的使用
2020/11/30 Python
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
一些.net面试题
2014/10/06 面试题
财务管理专业应届毕业生求职信
2013/09/22 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
大学生标准自荐书
2014/06/15 职场文书
六查六看自查报告
2014/10/14 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
教师个人教学反思
2016/02/23 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python