通过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.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
js点击选择文本的方法
Feb 09 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
JS前端广告拦截实现原理解析
Feb 17 Javascript
Vue实现Layui的集成方法步骤
Apr 10 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
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
python中去空格函数的用法
2014/08/21 Python
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
详解Python3中yield生成器的用法
2015/08/20 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
Django如何自定义分页
2018/09/25 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
销售助理岗位职责
2014/02/21 职场文书
大专学生求职自荐信
2014/07/06 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
大一新生检讨书
2014/10/29 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
房产分割协议书范文
2014/11/21 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
杨善洲电影观后感
2015/06/04 职场文书
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python