コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery を使用して、中国語、ピンイン、英語の高速位置決めをサポートするスーパー選択プラグインを作成する queries_jquery

jQuery を使用して、中国語、ピンイン、英語の高速位置決めをサポートするスーパー選択プラグインを作成する queries_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 = '';
selectid = selectgotoij = -10; 🎜>optionhover();
}
//条件を満たすすべての要素を取得し、データ形式で返します、str: 検索する文字列、container: チェックされる配列
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 = ""; 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) //文字の場合j から開始して str と一致し、その後 ok
{
returnvalue = returnvalue curCon "|";
}
}
}
}
if (returnvalue.length > 1 ) returnvalue = returnvalue.length - 1);
var returnvalue = returnvalue.sort();
return returnvalue;
////カテゴリ選択スタイル操作////////////////////////////////////// //// //////////////
関数 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({
背景: "白"
})
}
});
}
関数 getelectvalue(str) {
objid = obj.attr('id');
objid.replace("selectinput", "");
var myid = ''('#' objid); 'option') .each(function() {
if (str == $(this).text()) {
myid = $(this).val();
return false; / / ループから抜け出す
//alert(myid);
}
});
return
}
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) {
return idx * 14 - 23;
;オプション div スクロール バー
関数 moveScrollbar(idx) {
if (idx < 1) {
return false;
}
if (idx > ij) {
return false ;
}
var t = getTop(idx);
var ch = $('#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;
};
mfocus = 1;ケース 37:
{
mfocus = 0;
creatediv();
$("#selectclassdiv" selectid).css({
背景: "白"
});
selectid = selectid - 1;
moveScrollbar(selectid);
$("#selectclassdiv" selectid).css({
background: "#0080FF"
});ブレーク;
}
ケース 39:
{
mfocus = 0;
$("#selectclassdiv" selectid).css({
background: "白"
} );
selectid = selectid 1;
$("#selectclassdiv" selectid).css({
background: "#0080FF"
});
break;
}
ケース 40:
{
mfocus = 0;
$("#selectclassdiv" selectid).css({
background) : "白"
});
selectid = selectid 1;
$("#selectclassdiv" selectid); css({
background: "#0080FF"
});
break;
}
ケース 38:
{
mfocus = 0;
$("#selectclassdiv" selectid); .css({
背景: "白"
});
selectid = selectid - 1;
$("#selectclassdiv" selectid);
背景: "# 0080FF"
});
ブレーク
}
ケース 13:
{
mfocus = 0;
setval($("#selectclassdiv" selectid).html()); ' objid).change();
$('#selectcontent').hide();
$('.selectimg').attr("src", "img/multiselect.gif"); 🎜>ブレーク;
}
ケース 9:
{
mfocus = 0;
ブレーク
}
}
if (mfocus == 1) {
creatediv();
$('#' selectinputname objid); ).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; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか? Webアプリケーションを開発しています。 Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか?私はセマンティック バージョニングを使用しており、...
から 2024-04-06 19:13:16
0
2
476
MySQL は複数のテーブルからデータを取得します 次の列を含む eg_design テーブル、および次の列を含む eg_domains テーブル、および次の列を含む eg_fonts テーブルがあります。 $domain_id に...
から 2024-04-06 18:42:44
0
2
479
入力フィールドメソッドの戻り値の合計を取得します。 ユーザーが入力した合計値を見つけようとしています。数値と同じ値を乗算する集計を取得します letDem200=document.querySelector(".input...
から 2024-04-06 18:19:37
0
1
380
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート