5

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

リストに (C#、Java、Python) がある場合

「abcds . .」と入力し始めることができます。有効なエントリのみを許可する必要があります。

4

4 に答える 4

13

更新 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. 軽量実装;-)

お知らせ下さい！

于 2010-05-04T19:46:20.293 に答える
2

オートコンプリートを設定した後、このコードを使用してスペース文字と等号文字 (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 オートコンプリートに mustMatch 機能を追加で実装したい場合は、こちらをご覧ください: jQuery UI オートコンプリートで "mustMatch" と "selectFirst" を実装する方法?

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

于 2010-05-06T08:52:59.033 に答える
1

あなたの質問は、 jQuery プラグイン フォーラムや、jQuery UI オートコンプリートで「mustMatch」と「selectFirst」を実装する方法で、人々がこの問題について議論している一般的な要求でもあるようです。

この質問に対する受け入れられた答えは機能します。したがって、Doc Hoffidayのソリューションは評判に値します。

あるいは、 Jörn Zaefferer の autocompleteを「mustMatch」オプションで使用することもできます。

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

<input id="tags" />

アップデート

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

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

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

「変更」イベントを使用しましたが、「閉じる」イベントを使用して何かを機能させることもできます。言いたくないのですが、新しい jQuery UI オートコンプリートを使ったこれまでの経験では、少し信頼性が低いということです。複数のタイプのイベント コールバックが構成されていると、事態が混乱するように見えます。

更新 2

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

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

于 2010-04-30T11:37:12.893 に答える
0 
$("#myautocompletectrl").keypress(function (e) {
    if (e.which == 32 | e.which == 61) {
      e.preventDefault();
    }
 }).val('mydefaultvalue');

それは私のために働きます...ありがとうございます：D

于 2010-12-15T15:34:59.257 に答える