지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > jQuery를 사용하여 중국어 문자, 병음 및 영어 빠른 위치 지정 쿼리를 지원하는 슈퍼 선택 플러그인 만들기_jquery

jQuery를 사용하여 중국어 문자, 병음 및 영어 빠른 위치 지정 쿼리를 지원하는 슈퍼 선택 플러그인 만들기_jquery

WBOY
풀어 주다： 2016-05-16 18:24:59
원래의
1336명이 탐색했습니다.
코드 복사 코드는 다음과 같습니다.

//潇湘博客
//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);
selectid =
selectgotoij; 🎜>optionhover();
}
//조건에 맞는 모든 요소를 ​​가져와 데이터 형식으로 반환, str: 찾을 문자열, 컨테이너: 검사할 배열
function GetAllLikeString(mstr , 컨테이너 ) {
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 curCon = 컨테이너[i];
for (var j = 0; 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) //If 문자 j에서 시작하여 str과 일치하면 ok
{
returnvalue = returnvalue curCon "|"
}
}
}
}
if (returnvalue.length > 1; ) returnvalue = returnvalue.substring(0, returnvalue.length - 1);
var returnvalue = returnvalue.split("|");
returnvalue.sort();
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). 변경();
$('#selectcontent').hide();
$('.selectimg').attr("src", "img/multiselect.gif")
}) ;
_self.hover(
function() {
if (getselectvalue(_self.html()) != $('#' objid).val()) {
mform.find( '.selectclassdiv' ).css({
배경: "흰색"
})
}
$(this).css({
배경: "#0080FF"
});
},
function() {
if (getselectvalue(_self.html()) != $('#' objid).val()) {
$(this) .css({
배경: "흰색"
})
}
})
}
function getselectvalue(str) {
objid = obj.attr('id');
objid.replace("selectinput", "");
var myid = ''
$('#' objid). '옵션') .each(function() {
if (str == $(this).text()) {
myid = $(this).val();
return false; / / 루프 종료
//alert(myid);//
}
})
return myid;
}
function setval(selfhtml)
objid = obj.attr('id');
objid.replace("selectinput", "")
//alert(selfhtml); selectcontent').length == 0) {
return false
}
$('#' objid).attr('value', getselectvalue(selfhtml))
$('# ' selectinputname objid).val( selfhtml);
function getTop(idx) {
var mfontsize;
return idx * 14 - 23; 옵션 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 = 0;
//return false
}
mfocus = 1
switch(event.keyCode); 사례 37:
{
mfocus = 0;
creatediv();
$("#selectclassdiv" selectid).css({
배경: "흰색"
});
selectid - 1;
moveScrollbar(selectid);
$("#selectclassdiv" selectid).css({
배경: "#0080FF"
}); break;
}
케이스 39:
{
mfocus = 0;
creatediv()
$("#selectclassdiv" selectid).css({
배경: "흰색"
} );
selectid 1;
moveScrollbar(selectid)
$("#selectclassdiv" selectid).css({
배경: "#0080FF"
});
break;
}
사례 40:
{
mfocus = 0
$("#selectclassdiv" selectid).css({
배경 : "흰색"
});
selectid 1;
moveScrollbar(selectid)
$("#selectclassdiv" selectid).css({
배경: "#0080FF"
});
break;
}
케이스 38:
{
mfocus = 0
$("#selectclassdiv" selectid) .css({
배경: "흰색"
});
selectid = selectid - 1;
moveScrollbar(selectid)
$("#selectclassdiv" selectid).css({
배경: "# 0080FF"
})
휴식
}
사례 13:
{
mfocus = 0;
creatediv()
setval($("#selectclassdiv" selectid).html())
$('# ' objid).change();
$('#selectcontent').hide()
$('.selectimg').attr("src", "img/multiselect.gif")
break;
}
케이스 9:
{
mfocus = 0
$('#selectcontent').remove()
break; 🎜>}
if (mfocus == 1) {
creatediv();
createoption(1)
}
}); ).click(function() {
$('#' selectinputname objid).select();
})
}
};



코드 복사

코드는 다음과 같습니다. >

JS 코드:




코드 복사


코드는 다음과 같습니다.
$ (document).ready(function(){ $('#sssss').selectseach(); }) 다운로드 주소:
http: // www.jb51.net/jiaoben/27673.html

저는 항상 병음을 통해 드롭다운 상자의 optIOn 값을 찾을 수 있는 플러그인을 찾고 싶었습니다. 모두 한 단계로 이루어지며 편집 가능한 입력 상자도 지원합니다.
관련 라벨：
빠른 포지셔닝 병음 한자 영문
원천：php.cn
이전 기사：고성능 WEB 개발을 위한 놀라운 HTML 압축_javascript 기술 다음 기사：juqery 라디오 작성 방법(jquery의 이전 버전과 새 버전)의 호환성 문제에 대해_jquery
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Width 속성을 추가하여 콘텐츠를 왼쪽으로 이동합니다. 나는 본문에 여백을 제공했습니다. main {left margin: 200px; right margin: 200px; text alignment: center} ...
에서 2024-04-06 22:01:35
0
3
816
MySQL SQL 쿼리를 사용하여 다른 테이블의 필드 합계를 계산합니다. 다음과 같은 스키마가 있습니다. "user_id" 및 "username" 속성이 있는 사용자 테이블과 "custome...
에서 2024-04-06 19:39:29
0
1
441
웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 웹 애플리케이션을 개발 중입니다. 웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 저는 semantic versioning을 사용하고 있고 이미 ...
에서 2024-04-06 19:13:16
0
2
476
MySQL은 여러 테이블에서 데이터를 가져옵니다. 다음 열이 포함된 eg_design 테이블이 있습니다. 다음 열이 포함된 eg_domains 테이블과 다음 열이 포함된 eg_fonts 테이블이 있습니다. 이제 ...
에서 2024-04-06 18:42:44
0
2
479
입력 필드 메소드의 총 반환 값을 가져옵니다. 사용자가 입력한 총 가치를 구하려고 합니다. 숫자에 동일한 값을 곱하는 집계 가져오기 letDem200=document.querySelector(".in...
에서 2024-04-06 18:19:37
0
1
380
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿