37

入力時にドロップダウンの内容をフィルタリングするプロトタイプ プラグインを使用しました。たとえば、テキスト ボックスに「cat」と入力すると、部分文字列「cat」を含むアイテムのみがドロップダウンのオプションとして残されます。

これを行うことができるjqueryプラグインを知っている人はいますか?

4

8 に答える 8

53

私は似たようなものを探していましたが、必要なものに最適なものはJQuery UI MultiSelectのようです。複数選択ボックスを、マスター リストでのライブ フィルタリングを使用して、非常に洗練されたデュアル リスト ビューに変えます。

編集: 新しい開発!

「Chosenは、長くて扱いにくい選択ボックスをより使いやすくする JavaScript プラグインです。現在、jQuery と Prototype の両方で利用できます。」

近い将来、select を使用するすべてのプロジェクトでChosenを完全に使用しています。

于 2010-05-10T12:42:47.407 に答える
30

Select2は Chosen のかなり最近のフォークであり、さらに多くの機能 (たとえば、AJAX + 個々のアイテムのカスタム HTML) があります。

于 2012-04-13T22:19:41.210 に答える
27

数年前にこれを行うための小さなスクリプトを書きました。おそらく、jQuery プラグインとして非常に簡単にパッケージ化できます。どういたしまして。

コードを確認したい場合は、PHP Function Reference Dashboard ウィジェットでもこれを行います。

于 2009-04-01T19:24:53.793 に答える
12

これらのプラグインを確認してください:

于 2009-04-01T19:02:11.337 に答える
10

jQueryオートコンプリートプラグイン

編集: 最初に間違ったオートコンプリート プラグインにリンクしました。

于 2009-04-01T19:00:50.043 に答える
1

私はこの機能を手早く実装しました。いくつかのグローバル変数を使用しているため、実装を改善してこれらを削除することをお勧めします。

ここで、「#xsca_member_filter」はテキスト入力としてのフィルターで、「#members」は選択入力です。

$('documenet').ready(function(){
    init();
   $('#xsca_member_filter').keyup(function(){
       filter($(this));
   });
});

//save all available options with their values and the empty option.
init = function(){
    options = new Object();
    $('#owner option').each(function(){
        var obj = $(this);
        if(obj.attr("value") != "")
            options[obj.attr('value')] = obj.html();
        else
            emptyOption = obj.html();
    });
    selObj = $('#owner');
};

filter = function(elem){
    var filter = elem.val();
    var selected = $('#owner option:selected').val();

    //delete all options and add the empty option
    selObj.html("");
    selObj.append("<option> "+emptyOption+" </option>");

    //add all options conaining the filter string
    for(value in options){
        var option = options[value];
        if((options[value]).indexOf(filter) != -1){
            selObj.append("<option value='"+value+"'> "+options[value]+" </option>");
        }
    }

    //select the previously selected option
    $("#owner option[value = '"+selected+"']").prop("selected", true);
}
于 2012-12-31T15:56:24.433 に答える
1

実際の選択ボックスに基づいて、オプションテキストの途中で一致する「jqueryオプションフィルター」を試してください： http://plugins.jquery.com/project/jquery_options_filter

ディイズムのために

于 2009-09-14T06:37:20.243 に答える