web-dev-qa-db-ja.com

Jquery：入力時にフィルタードロップダウンリスト

入力時にドロップダウンのコンテンツをフィルタリングするプロトタイププラグインを使用しました。たとえば、テキストボックスに「cat」と入力した場合、サブストリング「cat」を含むアイテムのみがドロップダウンのオプションとして残ります。

誰でもこれを行うことができるjqueryプラグインを知っていますか？

javascriptjqueryjquery-plugins
35
Robin Barnes

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

また、コードを確認したい場合は、 PHP関数リファレンス Dashboardウィジェットでもこれを行います。

27
Andrew Hedges

私はちょうど似たようなものを探していましたが、私が必要とするものに最適なものは JQuery UI MultiSelect のようです。複数選択ボックスを非常に滑らかなデュアルリストビューに変え、マスターリストでライブフィルタリングを行います。

編集：新規開発！

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

近い将来、すべての選択使用プロジェクトで Chosen を使用しています。

52
Ed Brannin

Select2 は、最近選ばれたフォークであり、さらに多くの機能があります（例：AJAX +個々のアイテムのカスタムHTML）。

28
ifarted

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

12
CMS

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

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

9
karim79
$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#filter *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<h2>Filter</h2>
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<div class="filter-by">
  <span>Filter by:</span>
  <select class="status-filter" id="filter">
    <option value="">All</option>
    <option value="paid">Paid</option>
    <option value="accepted">Accepted</option>
    <option value="pending">Pending</option>
    <option value="rejected">Rejected</option>
    </select>
</div>
4
Vijay Makwana

私はこの機能をすぐに実装しました。いくつかのグローバル変数を使用しますが、これらを削除するには実装を改善する必要があります。

ここで、「＃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);
}
1
Oskar

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

日記のために

1
diyism