通过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 相关文章推荐
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
vue使用v-for实现hover点击效果
Sep 29 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
原生JS中应该禁止出现的写法
May 05 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项目开发中最常用的自定义函数整理
2010/12/02 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
AngularJS日程表案例详解
2017/08/15 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
Python素数检测实例分析
2015/06/15 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
django批量导入xml数据
2016/10/16 Python
python实现机器人行走效果
2018/01/29 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
Python语言快速上手学习方法
2018/12/14 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
学雷锋月活动总结
2014/04/25 职场文书
党员创先争优活动总结
2014/05/04 职场文书
第一书记观后感
2015/06/08 职场文书
同学聚会感言一句话
2015/07/30 职场文书
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL