フィルタ条件としてテキストボックス入力を使用したDropDownList

EternalWulf

データベースからのエントリの束が入力されているビューのASP.NETMVCDropDownListまたは同等のものが必要です。

を選択DropDownListすると、ユーザーがテキストを入力できることを除いて、通常どおりリストが生成されDropDownListます。その時点で、の項目は入力されたテキストに基づいてフィルタリングされます。

ただし、ユーザーはリスト内のオプションの1つしか選択できないはずです。

それは他のコントロールである可能性がありますが、サードパーティのものではないことが望ましいです。

EternalWulf

私はうまくいくまともな方法を見つけました。

これに関する唯一の問題は、2つの別々のコントロール(DropDownListTextBoxが必要なことですが、それ以外は美しく機能します。

HTMLコード(コントロールの宣言)は次のとおりです。

<table>
    <tr>
        <td>
            <div>
                <%: Html.Label("Search Filter:")%>
            </div>
        </td>
        <td>
            <div>
                <%: Html.TextBox("textBoxForFilterInput")%>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <%: Html.Label("The List")%>
            </div>
        </td>
        <td>
            <div>
                <%: Html.DropDownList("listOfOptions")%>
            </div>
        </td>
    </tr>
</table>

JavaScriptコードは次のとおりです。

    $(function () {
        var opts = $('#listOfOptions option').map(function () {
            return [[this.value, $(this).text()]];
        });

        $('#textBoxForFilterInput').keyup(function () {
            var rxp = new RegExp($('#textBoxForFilterInput').val(), 'i');
            var optlist = $('#listOfOptions').empty();
            opts.each(function () {
                if (rxp.test(this[1])) {
                    optlist.append($('<option/>').attr('value', this[0]).text(this[1]));
                }
            });
        });
    });

次に、データを入力するだけで、準備が整い#listOfOptionsます。

または、事前定義されたリスト/配列に接続するか、私のようにデータベースからフェッチすることもできます。

これは魅力のように機能し、非常にシンプルで超高速です。

正しい道に私を送ってくれたDMI感謝します。

これに関する彼の仕事はここにあります

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

チェックボックスを使用して入力テキストフィールドを更新する

分類Dev

リストボックスがファイル名を使用して入力されている間に、テキストボックスを使用してリストボックスをフィルタリングする

分類Dev

ボタンクリックでテキストフィールドの選択されたテキストを取得する方法は?pickerviewは、テキストフィールドへの入力ビューとして設定されます。迅速

分類Dev

Angular2-テキストボックスに入力した値の削除/キャンセルテキストを表示し、テキストの削除/キャンセルをクリックして入力フィールドをクリアします

分類Dev

チェックボックスとjsを使用したテキスト入力

分類Dev

テキストボックスにIDを挿入した後、[テキストボックスに入力]をクリックして、ajax phpsqlを使用してフォームにデータを入力します

分類Dev

ユーザーがボタンxをクリックしたときに、入力フィールドxにテキストを追加します

分類Dev

Javascriptを使用して、テキストと入力ボックスをテーブルセルに追加します

分類Dev

同じ行にテキストフィールドとチェックボックスを入力します

分類Dev

入力フィールドにテキストを入力し、<Enter>ボタンを押してキャプチャし、配列と現在の時刻を使用してブートストラップカードに表示します。

分類Dev

jQueryボタンをブートストラップし、クリックしてテキスト/入力フィールドを切り替えます

分類Dev

テキストボックスとボタンを使用して、ブートストラップグリフィコンを入力グループに追加します

分類Dev

入力フィールドのテキストを使用して検索ボタンを押してOMDBAPI呼び出しを行おうとしています

分類Dev

anglejsを使用してコンボボックスから入力テキストフィールドを設定します

分類Dev

anglejsを使用してコンボボックスから入力テキストフィールドを設定します

分類Dev

MVVM / LINQとXAMLを使用してテキストボックスにデータを入力する

分類Dev

テキストボックスを使用したフィルタリングと検索

分類Dev

ユーザーがテキストボックスに入力した内容に応じてリストをフィルタリングしたいと思います。私はangularJSを使用しています。コードが機能しないのはなぜですか?

分類Dev

クリックしてテキストフィールドを表示(入力)

分類Dev

入力ボックスを使用した角度 2 テーブルのフィルタリング

分類Dev

テキストボックスエントリをセルと照合して、列にユーザーフォームデータを入力します

分類Dev

JavaScriptを使用して、入力フィールドのテキストボックスで複数の単語を確認します

分類Dev

送信ボタンをクリックせずにjavascriptまたはjQueryを使用して、入力されたテキストボックスから任意の値を選択したときにフォームを送信する方法

分類Dev

アップロード入力テキストフィールドと選択したファイルボタンを交差させる

分類Dev

ユーザーがフィールドの名前/ IDを入力したときにテキストボックスの値を取得する

分類Dev

変数プレースホルダーを使用したテキスト入力とボタンクリックでクリア

分類Dev

C#でテキストボックスとボタンクリックを使用してdatagridviewをフィルタリングする方法は?

分類Dev

条件としてテキストボックスの色を使用したIfステートメント

分類Dev

テキストボックスを使用したクロスフィルタリング

Related 関連記事

  1. 1

    チェックボックスを使用して入力テキストフィールドを更新する

  2. 2

    リストボックスがファイル名を使用して入力されている間に、テキストボックスを使用してリストボックスをフィルタリングする

  3. 3

    ボタンクリックでテキストフィールドの選択されたテキストを取得する方法は?pickerviewは、テキストフィールドへの入力ビューとして設定されます。迅速

  4. 4

    Angular2-テキストボックスに入力した値の削除/キャンセルテキストを表示し、テキストの削除/キャンセルをクリックして入力フィールドをクリアします

  5. 5

    チェックボックスとjsを使用したテキスト入力

  6. 6

    テキストボックスにIDを挿入した後、[テキストボックスに入力]をクリックして、ajax phpsqlを使用してフォームにデータを入力します

  7. 7

    ユーザーがボタンxをクリックしたときに、入力フィールドxにテキストを追加します

  8. 8

    Javascriptを使用して、テキストと入力ボックスをテーブルセルに追加します

  9. 9

    同じ行にテキストフィールドとチェックボックスを入力します

  10. 10

    入力フィールドにテキストを入力し、<Enter>ボタンを押してキャプチャし、配列と現在の時刻を使用してブートストラップカードに表示します。

  11. 11

    jQueryボタンをブートストラップし、クリックしてテキスト/入力フィールドを切り替えます

  12. 12

    テキストボックスとボタンを使用して、ブートストラップグリフィコンを入力グループに追加します

  13. 13

    入力フィールドのテキストを使用して検索ボタンを押してOMDBAPI呼び出しを行おうとしています

  14. 14

    anglejsを使用してコンボボックスから入力テキストフィールドを設定します

  15. 15

    anglejsを使用してコンボボックスから入力テキストフィールドを設定します

  16. 16

    MVVM / LINQとXAMLを使用してテキストボックスにデータを入力する

  17. 17

    テキストボックスを使用したフィルタリングと検索

  18. 18

    ユーザーがテキストボックスに入力した内容に応じてリストをフィルタリングしたいと思います。私はangularJSを使用しています。コードが機能しないのはなぜですか?

  19. 19

    クリックしてテキストフィールドを表示(入力)

  20. 20

    入力ボックスを使用した角度 2 テーブルのフィルタリング

  21. 21

    テキストボックスエントリをセルと照合して、列にユーザーフォームデータを入力します

  22. 22

    JavaScriptを使用して、入力フィールドのテキストボックスで複数の単語を確認します

  23. 23

    送信ボタンをクリックせずにjavascriptまたはjQueryを使用して、入力されたテキストボックスから任意の値を選択したときにフォームを送信する方法

  24. 24

    アップロード入力テキストフィールドと選択したファイルボタンを交差させる

  25. 25

    ユーザーがフィールドの名前/ IDを入力したときにテキストボックスの値を取得する

  26. 26

    変数プレースホルダーを使用したテキスト入力とボタンクリックでクリア

  27. 27

    C#でテキストボックスとボタンクリックを使用してdatagridviewをフィルタリングする方法は?

  28. 28

    条件としてテキストボックスの色を使用したIfステートメント

  29. 29

    テキストボックスを使用したクロスフィルタリング

ホットタグ

アーカイブ