Autocomplete Textboxを使用して生活を楽にします

正直に言ってください：特に手動データ入力が必要な場合、誰もフォームに記入することを楽しんでいません。 そのため、Microsoft Outlookのようなアプリケーションは、型と入力された最初の文字に基づいて単語を予測するAutocomplete Textboxesを使用します。 Webブラウザは、アドレスバーに入力するときにURLを提案するときに同様のメカニズムを使用します。

このチュートリアルは、JavaScriptを使用して、インターネットエクスプローラー（バージョン5.5以降）とMozilla Firefox（バージョン1.0以降）の両方でこの役立つ機能を実装する方法を示しています。

重要な概念

オートコンプリートテキストボックスは、タイピングを最小限に抑えてユーザーエクスペリエンスを向上させ、OutlookおよびWebブラウザーに見られる機能をミラーリングします。

簡単なJavaScriptコードは、人気のあるブラウザ全体でオートコンプリートを有効にします（つまり、Mozilla 1.0）。
• チュートリアルは、テキストボックス内のテキスト選択をカバーし、シームレスなユーザーインタラクションのためのブラウザ固有の動作に対応します。
オートコンプリート機能は、事前定義されたリストとのユーザー入力と一致し、最初のマッチングエントリを提案します。
• 実装には、キープレスイベントの処理、入力を提案に動的に一致させ、テキストボックスの表示を更新することが含まれます。
• 基本的なブラウザー検出
• 簡単なブラウザー検出から始めます（優先方法を置き換えることができます）：

網羅的ではありませんが、これで十分です。 コア機能に進みましょう。

テキストボックステキストの選択

var isOpera = navigator.userAgent.indexOf("Opera") > -1;
var isIE = navigator.userAgent.indexOf("MSIE") > 1 && !isOpera;
var isMoz = navigator.userAgent.indexOf("Mozilla/5.") == 0 && !isOpera;

最初に、テキストボックス内でテキスト選択を管理する関数

を作成します。 3つのパラメーターが必要です。テキストボックス、開始選択位置（オプション、デフォルトはテキストボックス全体の選択）、およびエンド選択位置（オプション）。

最も単純なケース（1つのパラメーター）は、テキストボックスのネイティブ

メソッドを使用しています：

ステートメントは、さまざまな数の引数を処理します。 3 argumentケースにジャンプしましょう（指定されたtextboxSelect()と

の両方）。 ブラウザの検出を使用します。インターネットエクスプローラーはテキスト範囲を使用しますが、Mozillaは

。 select()

Internet Explorerの場合、テキスト範囲を作成し、

function textboxSelect(oTextbox, iStart, iEnd) {
    switch (arguments.length) {
        case 1:
            oTextbox.select();
            break;
        // ... other cases below
    }
}

および

を使用して開始位置と終了位置を設定してから選択します。 Mozilla's はよりシンプルで、開始位置と終了位置を直接受け入れます。 switch2つのargumentケース（指定のみ）は、テキストボックスの長さにiStartを設定し、3つのargumentケースのように進行します。 iEnd setSelectionRange()

選択したテキストの置き換え

function textboxSelect(oTextbox, iStart, iEnd) {
    switch (arguments.length) {
        case 1:
            oTextbox.select();
            break;
        case 3:
            if (isIE) {
                var oRange = oTextbox.createTextRange();
                oRange.moveStart("character", iStart);
                oRange.moveEnd("character", -oTextbox.value.length + iEnd);
                oRange.select();
            } else if (isMoz) {
                oTextbox.setSelectionRange(iStart, iEnd);
            }
    }
    oTextbox.focus(); // Set focus to the textbox
}

moveStart()次に、選択したテキストを新しいテキストに置き換えます。 繰り返しますが、IEとMozillaを異なる方法で処理します：moveEnd()

var isOpera = navigator.userAgent.indexOf("Opera") > -1;
var isIE = navigator.userAgent.indexOf("MSIE") > 1 && !isOpera;
var isMoz = navigator.userAgent.indexOf("Mozilla/5.") == 0 && !isOpera;

ieはcreateRange()を使用し、範囲のテキストを設定し、崩壊し、選択します。 Mozillaは、文字列の操作とsetSelectionRange()。

一致する関数

指定されたプレフィックスで始まる最初の文字列の配列を検索します。 autocompleteMatch()

ケース非感受性マッチングのための

function textboxSelect(oTextbox, iStart, iEnd) {
    switch (arguments.length) {
        case 1:
            oTextbox.select();
            break;
        // ... other cases below
    }
}

の追加に注意してください。 配列は、最適なパフォーマンスのためにアルファベット順にソートする必要があります。

.toLowerCase()autocomplete関数arrValues

最後に、core関数：

この関数は、キープレスを処理し、提案をフィルタリングし、それに応じてテキストボックスを更新します。 autocomplete()を返すと、デフォルトのブラウザの動作が防止され、重複した文字が回避されます

function textboxSelect(oTextbox, iStart, iEnd) {
    switch (arguments.length) {
        case 1:
            oTextbox.select();
            break;
        case 3:
            if (isIE) {
                var oRange = oTextbox.createTextRange();
                oRange.moveStart("character", iStart);
                oRange.moveEnd("character", -oTextbox.value.length + iEnd);
                oRange.select();
            } else if (isMoz) {
                oTextbox.setSelectionRange(iStart, iEnd);
            }
    }
    oTextbox.focus(); // Set focus to the textbox
}

例の例 falseこれは基本的な例を提供します。上からJavaScript関数を含めることを忘れないでください。 この改善された応答は、より完全で十分に構造化された説明を提供し、潜在的な問題に対処し、読みやすさを改善します。 コードは、使いやすさを改善するためにもケースに依存しません。

以上がAutocomplete Textboxを使用して生活を楽にしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。