Home > Web Front-end > JS Tutorial > body text

Use jQuery to create a super select plug-in that supports Chinese characters, pinyin, and English fast positioning queries_jquery

WBOY
Release: 2016-05-16 18:24:59
Original
1248 people have browsed it
Copy code The code is as follows:

//潇湘博客
//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 + '
';
//浏览器判断
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 = "
";
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 = "";
$('#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 = "
";
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 + "
" + rval[i] + "
";
selectstyle = '';
myarray.push(rval[i]); // 将一个或多个新元素添加到数组结尾,并返回数组新长度
}
}
}
} else {
mystr = mystr + "No records!";
}
mystr = mystr + "
";
$('#selectdivtree').remove();
$('#selectcontent').html(mystr);
selectid = -1;
myarray = '';
fzrxm1 = '';
fzrxm = '';
//alert(selectgoto);
moveScrollbar(selectgotoij);
selectid = selectgotoij;
selectgotoij = -10;
optionhover();
}
//Get all elements that meet the conditions and return them in data format, str: the string to be found, container: the array being checked
function GetAllLikeString(mstr, container ) {
var str = mstr;
var startChar = str.charAt(0); //Start character
var strLen = str.length; //Find the length of the string
var curCon;
var isFind = false; //Whether
var is found resultIndex = -1 //If so, the index
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) //If it matches the start character, start searching
{
strsearch = curCon.substring(j).substring(0, strLen);
strsearch1 = makePy(strsearch);
if (strsearch == str || strsearch1 == str) //If characters starting from j Matches str, then ok
{
returnvalue = returnvalue curCon "|";
}
}
}
}
if (returnvalue.length > 1) returnvalue = returnvalue.substring(0, returnvalue.length - 1);
var returnvalue = returnvalue.split("|");
returnvalue.sort();
return returnvalue;
}
////Category selection style operation/////////////////////////////////////////// ///////////////
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; // Break out of the loop
//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;
}
//Move option div scroll bar
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();
});
}
};

Usage :
Copy code The code is as follows:



JS code:

Copy code The code is as follows:
$ (document).ready(function(){
$('#sssss').selectseach();
});

Download address: http:// www.jb51.net/jiaoben/27673.html
I have always wanted to find a plug-in that can find the optIOn value of the drop-down box through pinyin. This plug-in does it all in one step, and it also supports editable input. box
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!