jQuery UI Autocomplete ComboBoxで無効なキーストロークを入力することを制限できますか？

StackOverflow https://stackoverflow.com/questions/2708805

質問

使用するとき jQuery UIオートコンプリート コンボボックス, 、リストに基づいて有効なキーエントリのみを強制するオプションがあると思いました。無効なキーを許可しない方法はありますか？リスト内に有効なアイテムのみを入力できますか？また、コンボボックスのデフォルト値を設定する方法はありますか？

私のリストがある場合（c＃、java、python）

「ABCDS。」の入力を開始できます。入力できます。有効なエントリのみが許可されている必要があります。

役に立ちましたか？

解決

更新2

Tested on
Internet Explorer 6 and later
Chrome
Firefox
Opera

デモ： http://so.lucafilosofi.com/can-you-restrict-entering-invalid-keystrokes-with-jquery-ui-autocomplete-combobox

コアJavaScriptコード：

    var Tags = ['csharp', 'java', 'python' ];

    $("#autocomplete").keypress(function(event) {
        //Firefox workaround..
        if (!event.which &&
            ((event.charCode || event.charCode === 0) ? event.charCode: event.keyCode)) {

            event.which = event.charCode || event.keyCode;
        }
        var charCode = String.fromCharCode(event.which).toLowerCase();
        var search_val = this.value + charCode;
        var x = search_val.length - 1;
        var match;
        for (var i = 0; i < Tags.length; i++) {
            if (charCode == Tags[i][x] && Tags[i].indexOf(search_val) != -1) {
                match = true;
            }
        }
        //Backspace functionality added!
        if (!match && event.which != 8 ) {
            event.preventDefault();
        }
    });

ノート：

  1. リストに基づいて有効なキーエントリのみを強制します。
  2. デフォルト値を設定します。
  3. 軽量の実装;-)

お知らせ下さい！

他のヒント

オートコンプリートをセットアップした後、このコードを使用してスペース文字を防ぎ、文字に等しくなります（ASCIIコード32および61）。デフォルトを設定します。

     $("#myautocompletectrl").keypress(function (e) {
        if (e.which == 32 | e.which == 61) {
          e.preventDefault();
        }
     }).val('mydefaultvalue');

キーが決して押されなかったように振る舞います（あなたが望んでいたように）。

Firefox 3.63およびJQuery UI 1.8オートコンプリートでテストしました。

また、jQuery UI 1.8 AutoCompleteにMacdMatch機能をさらに実装したい場合は、こちらをご覧ください。 jQuery UI Autocompleteに「selectfirst」を実装する方法は？

編集： あなたはすでに私の投稿について読んでコメントしているのを見ています.... :)

あなたの質問はまた、 jQueryプラグインフォーラム とで jQuery UI Autocompleteに「selectfirst」を実装する方法 人々はこの問題について議論しています。

受け入れられた答え この質問は機能します。それで Doc Hoffidayのソリューションは本当に評判のポイントに値します。

または、使用することもできます JörnZaeffererのオートコンプリート とともに "一致している必要があります" オプション。

<script type="text/javascript">
$(document).ready(function(){
    var availableTags = ["csharp", "java", "python"];
    $("#tags").autocomplete(availableTags, {
        mustMatch: true
    });
});
</script>

<input id="tags" />

アップデート

当初、私はあなたがコンボボックスソリューションを望んでいることを逃していました。それをより明確にしてくれてありがとう。

コンボボックスの例を微調整しました。

実際にフォーム内で機能するようにいくつかの変更を加える必要がありました。イベントが正しい順序で発生したことを確認するために、短い遅延を導入しました。それ以外は、Doc Hoffidayのソリューションを挿入しました。

「Change」イベントを使用しましたが、「Close」イベントを使用して機能することもできます。私はそれを言うのは嫌いですが、これまでの新しいjQuery UI Autocompleteで働いた私の経験は、それが少し信頼できないということです。複数のタイプのイベントコールバックが構成されていると、物事が台無しになっているようです。

更新2

Doc Hoffidayのソリューションに基づいて新しいカスタムセレクターを追加して、入力されたテキストが有効なオプションの開始と一致するときに上書きされないようにしました。また、提供されるオプションをより正確な一致に制限するためにソースを更新しました。これがあなたの要件に近いことを願っています。

以前のコンボボックスの例を微調整しました。

$("#myautocompletectrl").keypress(function (e) {
    if (e.which == 32 | e.which == 61) {
      e.preventDefault();
    }
 }).val('mydefaultvalue');

それは私のために働きます...ありがとうあなた：d

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top