ホームページ ウェブフロントエンド jsチュートリアル jquery.AutoComplete.js 中国語改訂版(Firefox対応)_jquery

jquery.AutoComplete.js 中国語改訂版(Firefox対応)_jquery

May 16, 2016 pm 06:29 PM

コードをコピー コードは次のとおりです:

jQuery.autocomplete = function(input, options) {
// 自分自身へのリンクを作成します
var me = this;
// 入力要素の jQuery オブジェクトを作成します
var $input = $(input).attr("autocomplete", "off");
// 必要に応じて inputClass を適用します
if (options.inputClass) $input.addClass(options.inputClass);
// 結果を作成します
var results = document.createElement("div");
// 結果の jQuery オブジェクトを作成します
var $results = $(results);
$results.hide().addClass(options.resultsClass).css("位置", "絶対");
if (options.width > 0) $results.css("width", options.width);
// body 要素に追加
$("body").append(results);
input.autocompleter = 私;
var timeout = null;
var prev = "";
var active = -1;
var キャッシュ = {};
var keyb = false;
var hasFocus = false;
var lastKeyPressCode = null;
// キャッシュをフラッシュします
function flashCache() {
cache = {};
cache.data = {};
cache.length = 0;
};
// キャッシュをフラッシュします
flushCache();
// 指定されたデータ配列がある場合
if (options.data != null) {
var sFirstChar = "", stMatchSets = {}, row = [];
// URL が指定されていません。ローカル データ ストアに適合するようにキャッシュの長さを調整する必要があります。
if (typeof options.url != "string") options.cacheLength = 1;
// 配列をループしてルックアップ構造体を作成します
for (var i = 0; i < options.data.length; i ) {
// row が文字列の場合、配列を作成しますそれ以外の場合は、配列を参照するだけです
row = ((typeof options.data[i] == "string") ? [options.data[i]] : options.data[i]);
// 長さがゼロの場合、リストに追加しません
if (row[0].length > 0) {
// 最初の文字を取得します
sFirstChar = row[0 ].substring(0, 1).toLowerCase();
// この文字の検索配列が存在しない場合は、今すぐ検索します
if (!stMatchSets[sFirstChar]) stMatchSets[sFirstChar] = [];
// 一致が文字列の場合
stMatchSets[sFirstChar].push(row);
}
}
// データ項目をキャッシュに追加します
for (var k in stMatchSets) {
// キャッシュ サイズを増やします
options.cacheLength ;
// キャッシュに追加します
addToCache(k, stMatchSets[k]);
}
}
$input
.keydown(function(e) {
// 最後に押されたキーを追跡
lastKeyPressCode = e.keyCode;
switch (e.keyCode ) {
ケース 38: // アップ
e.preventDefault();
break;
ケース 40: // ダウン
e.preventDefault( );
moveSelect(1);
break;
case 9: // タブ
case 13: // return
if (selectCurrent()) {
//現在のフィールドをぼかす
$input.get(0).blur();
e.preventDefault();
default:
active = - 1;
if (タイムアウト) clearTimeout(timeout);
timeout(function() { onChange(); },
break;
})
.focus(function() {
// フィールドにフォーカスがあるかどうかを追跡します。フィールドにフォーカスがなくなった場合は結果を処理すべきではありません
hasFocus = true;
})
.blur(function() {
// フィールドにフォーカスがあるかどうかを追跡します
hasFocus = false;
hideResults();
})
.bind("input", function( ) {
// @hack:Firefox での中国語入力のサポート
onChange(0, true)
});
hideResultsNow();
function onChange() {
// 次のキーが押された場合は無視します: [del] [shift] [capslock]
if (lastKeyPressCode == 46 || (lastKeyPressCode > 8 && lastKeyPressCode < 32)) $results.hide() を返します。
var v = $input.val();
if (v == prev) return;
前 = v;
if (v.length >= options.minChars) {
$input.addClass(options.loadingClass);
requestData(v);
} else {
$input.removeClass(options.loadingClass);
$results.hide();
}
};
function moveSelect(step) {
var lis = $("li", results);
if (!lis) return;
アクティブ = ステップ;
if (アクティブ < 0) {
アクティブ = 0;
} else if (active >= lis.size()) {
active = lis.size() - 1;
}
lis.removeClass("ac_over");
$(lis[active]).addClass("ac_over");
// IE の奇妙な動作
// if (lis[active] && lis[active].scrollIntoView) {
// lis[active].scrollIntoView(false);
// }
};
function selectCurrent() {
var li = $("li.ac_over", results)[0];
if (!li) {
var $li = $("li", results);
if (options.selectOnly) {
if ($li.length == 1) li = $li[0];
} else if (options.selectFirst) {
li = $li[0];
}
}
if (li) {
selectItem(li);
true を返します。
} else {
return false;
}
};
function selectItem(li) {
if (!li) {
li = document.createElement("li");
li.extra = [];
li.selectValue = "";
}
var v = $.trim(li.selectValue ? li.selectValue : li.innerHTML);
input.lastSelected = v;
前 = v;
$results.html("");
$input.val(v);
hideResultsNow();
if (options.onItemSelect) setTimeout(function() { options.onItemSelect(li) }, 1);
};
// 入力文字列の一部を選択します
function createSelection(start, end) {
// 入力要素への参照を取得します
var field = $input.get(0);
if (field.createTextRange) {
var selRange = field.createTextRange();
selRange.collapse(true);
selRange.moveStart("文字", start);
selRange.moveEnd("文字", end);
selRange.select();
} else if (field.setSelectionRange) {
field.setSelectionRange(start, end);
} else {
if (field.selectionStart) {
field.selectionStart = start;
field.selectionEnd = 終了;
}
}
field.focus();
};
// 最初に一致したものを入力ボックスに入力します (最も一致すると想定されます)
function autoFill(sValue) {
// 最後に押されたユーザー キーがバックスペースだった場合、自動入力しません
if (lastKeyPressCode != 8) {
// 値を入力します (ユーザーが入力した大文字と小文字はそのままにしておきます)
$input.val($input.val() sValue.substring(prev.length) ));
// ユーザーが入力していない値の部分を選択します (次の文字が消去されます)
createSelection(prev.length, sValue.length);
}
};
function showResults() {
// 今すぐ入力フィールドの位置を取得します (DOM がシフトされた場合に備えて)
var pos = findPos(input);
// 指定された幅を使用するか、フォーム要素に基づいて自動計算します
var iWidth = (options.width > 0) ? options.width : $input.width();
// 位置を変更します
$results.css({
width: parseInt(iWidth) "px",
top: (pos.y input.offsetHeight) "px",
left: pos.x "px"
}).show();
};
function HideResults() {
if (タイムアウト) clearTimeout(タイムアウト);
タイムアウト = setTimeout(hideResultsNow, 200);
};
function HideResultsNow() {
if (タイムアウト) clearTimeout(タイムアウト);
$input.removeClass(options.loadingClass);
if ($results.is(":visible")) {
$results.hide();
}
if (options.mustMatch) {
var v = $input.val();
if (v != input.lastSelected) {
selectItem(null);
}
}
};
function acceptData(q, data) {
if (data) {
$input.removeClass(options.loadingClass);
results.innerHTML = "";
// フィールドにフォーカスがなくなった場合、または一致するものが存在しない場合は、ドロップダウンを表示しません。
if (!hasFocus || data.length == 0) return HideResultsNow();
if ($.browser.msie) {
// HTML SELECT 要素が透けて見えないように、カレンダーの後ろにスタイル付き iframe を配置します
$results.append(document.createElement('iframe') );
}
results.appendChild(dataToDom(data));
// ユーザーがさらにデータを入力していない限り、最初に一致したボックスに完全に自動入力します
if (options.autoFill && ($input.val().toLowerCase() == q .toLowerCase())) autoFill(data[0][0]);
showResults();
} else {
hideResultsNow();
}
};
function parseData(data) {
if (!data) return null;
var parsed = [];
var rows = data.split(options.lineSeparator);
for (var i = 0; i var row = $.trim(rows[i]);
if (row) {
parsed[parsed.length] = row.split(options.cellSeparator);
}
}
解析されて戻ります。
};
function dataToDom(data) {
var ul = document.createElement("ul");
var num = data.length;
// 結果を最大数に制限します
if ((options.maxItemsToShow > 0) && (options.maxItemsToShow < num)) num = options.maxItemsToShow;
for (var i = 0; i var row = data[i];
if (!row) 継続;
var li = document.createElement("li");
if (options.formatItem) {
li.innerHTML = options.formatItem(row, i, num);
li.selectValue = row[0];
} else {
li.innerHTML = row[0];
li.selectValue = row[0];
}
var extra = null;
if (row.length > 1) {
extra = [];
for (var j = 1; j < row.length; j ) {
extra[extra.length] = row[j];
}
}
li.extra = 追加;
ul.appendChild(li);
$(li).hover(
function() { $("li", ul).removeClass("ac_over"); $(this).addClass("ac_over"); active = $(" li", ul).indexOf($(this).get(0)); },
function() { $(this).removeClass("ac_over"); }
).click(function( e) { e.preventDefault() e.stopPropagation() });
}
ul を返します。
};
function requestData(q) {
if (!options.matchCase) q = q.toLowerCase();
var data = options.cacheLength ?ロードフロムキャッシュ(q) : null;
// キャッシュされたデータを受信します
if (data) {
receiveData(q, data);
// AJAX URL が指定されている場合は、今すぐデータのロードを試みます
} else if ((typeof options.url == "string") && (options.url.length > 0)) {
$.get(makeUrl(q), function(data) {
data = parseData(data);
addToCache(q, data);
receiveData(q, data);
} );
// データが見つからなかった場合は、読み込みクラスを削除します
} else {
$input.removeClass(options.loadingClass);
}
};
function makeUrl(q) {
var url = options.url "?q="escape(q);
for (var i in options.extraParams) {
url = "&" i "="scape(options.extraParams[i]);
}
URL を返します。
};
functionloadFromCache(q) {
if (!q) return null;
if (cache.data[q]) は、cache.data[q] を返します。
if (options.matchSubset) {
for (var i = q.length - 1; i >= options.minChars; i--) {
var qs = q.substr(0, i );
var c = キャッシュ.データ[qs];
if (c) {
var csub = [];
for (var j = 0; j var x = c[j];
var x0 = x[0];
if (matchSubset(x0, q)) {
csub[csub.length] = x;
}
}
csub を返します。
}
}
}
null を返します。
};
関数 matchSubset(s, sub) {
if (!options.matchCase) s = s.toLowerCase();
var i = s.indexOf(sub);
if (i == -1) は false を返します。
return i == 0 || options.matchContains;
};
this.flushCache = function() {
flushCache();
};
this.setExtraParams = function(p) {
options.extraParams = p;
};
this.findValue = function() {
var q = $input.val();
if (!options.matchCase) q = q.toLowerCase();
var data = options.cacheLength ?ロードフロムキャッシュ(q) : null;
if (data) {
findValueCallback(q, data);
} else if ((typeof options.url == "string") && (options.url.length > 0)) {
$.get(makeUrl(q), function(data) {
data = parseData(data)
addToCache(q, data)
findValueCallback(q, data);
} else {
// 一致するものはありません
findValueCallback(q, null);
}
}
function findValueCallback(q, data) {
if (data) $input.removeClass(options.loadingClass);
var num = (データ) ?データの長さ: 0;
var li = null;
for (var i = 0; i var row = data[i];
if (row[0].toLowerCase() == q.toLowerCase()) {
li = document.createElement("li");
if (options.formatItem) {
li.innerHTML = options.formatItem(row, i, num);
li.selectValue = row[0];
} else {
li.innerHTML = row[0];
li.selectValue = row[0];
}
var extra = null;
if (row.length > 1) {
extra = [];
for (var j = 1; j extra[extra.length] = row[j];
}
}
li.extra = 追加;
}
}
if (options.onFindValue) setTimeout(function() { options.onFindValue(li) }, 1);
}
function addToCache(q, data) {
if (!data || !q || !options.cacheLength) return;
if (!cache.length || キャッシュ.length > options.cacheLength) {
flushCache();
キャッシュの長さ;
} else if (!cache[q]) {
cache.length ;
}
cache.data[q] = データ;
};
function findPos(obj) {
var curleft = obj.offsetLeft || 0;
var curtop = obj.offsetTop || 0;
while (obj = obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
}
return { x: curleft, y: curtop };
}
}
jQuery.fn.autocomplete = function(url, options, data) {
// オプションが存在することを確認します
options = options || {};
// URL をオプションとして設定します
options.url = url;
// バルクローカルデータを設定します
options.data = ((typeof data == "object") && (data.constructor == Array)) ?データ: null;
// 必要なオプションのデフォルト値を設定します
options.inputClass = options.inputClass || "ac_input";
options.resultsClass = options.resultsClass || "ac_results";
options.lineSeparator = options.lineSeparator || 「ん」;
options.cellSeparator = options.cellSeparator || "|";
options.minChars = options.minChars || 1;
オプション.遅延 = オプション.遅延 || 400;
options.matchCase = options.matchCase || 0;
options.matchSubset = options.matchSubset || 1;
options.matchContains = options.matchContains || 0;
options.cacheLength = options.cacheLength || 1;
options.mustMatch = options.mustMatch || 0;
options.extraParams = options.extraParams || {};
options.loadingClass = options.loadingClass || "ac_loading";
options.selectFirst = options.selectFirst ||間違い;
options.selectOnly = options.selectOnly ||間違い;
options.maxItemsToShow = options.maxItemsToShow || -1;
options.autoFill = options.autoFill ||間違い;
options.width = parseInt(options.width, 10) || 0;
this.each(function() {
var input = this;
new jQuery.autocomplete(input, options);
});
// チェーンを壊さないでください。
これを返します。
}
jQuery.fn.autocompleteArray = function(data, options) {
return this.autocomplete(null, options, data);
}
jQuery.fn.indexOf = function(e) {
for (var i = 0; i if (this[i] == e ) i を返します。
}
-1 を返す;
};

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

独自のAjax Webアプリケーションを構築します 独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか? Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? 独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

シンプルなjQueryスライダーを構築する方法 シンプルなjQueryスライダーを構築する方法 Mar 11, 2025 am 12:19 AM

この記事では、jQueryライブラリを使用してシンプルな画像カルーセルを作成するように導きます。 jQuery上に構築されたBXSLiderライブラリを使用し、カルーセルをセットアップするために多くの構成オプションを提供します。 今日、絵のカルーセルはウェブサイトで必須の機能になっています - 1つの写真は千の言葉よりも優れています! 画像カルーセルを使用することを決定した後、次の質問はそれを作成する方法です。まず、高品質の高解像度の写真を収集する必要があります。 次に、HTMLとJavaScriptコードを使用して画像カルーセルを作成する必要があります。ウェブ上には、さまざまな方法でカルーセルを作成するのに役立つ多くのライブラリがあります。オープンソースBXSLiderライブラリを使用します。 BXSLiderライブラリはレスポンシブデザインをサポートしているため、このライブラリで構築されたカルーセルは任意のものに適合させることができます

jQueryマトリックス効果 jQueryマトリックス効果 Mar 10, 2025 am 12:52 AM

マトリックスの映画効果をあなたのページにもたらしましょう!これは、有名な映画「The Matrix」に基づいたクールなJQueryプラグインです。プラグインは、映画の古典的な緑色のキャラクター効果をシミュレートし、画像を選択するだけで、プラグインはそれを数値文字で満たされたマトリックススタイルの画像に変換します。来て、それを試してみてください、それはとても面白いです! それがどのように機能するか プラグインは画像をキャンバスにロードし、ピクセルと色の値を読み取ります。 data = ctx.getimagedata(x、y、settings.greasize、settings.greasize).data プラグインは、写真の長方形の領域を巧みに読み取り、jQueryを使用して各領域の平均色を計算します。次に、使用します

ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか? ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか? Mar 18, 2025 pm 03:17 PM

この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。

See all articles