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

Question

入力時にドロップダウンの内容をフィルタリングするプロトタイププラグインを使用しました。たとえば、テキストボックスに「cat」と入力した場合、サブストリング 'cat'を含む項目だけがドロップダウンのオプションとして残されます。

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

Answer 1

私は数年前にa little script to do thisを書いた：

Answer 2

jQueryのプラグインautocomplete

編集：私が最初に間違ったオートコンプリートのプラグインにリンクされています。

• SexyCombo
• QuickSelect
• DropList Filter

Answer 3

は、これらのプラグインをチェックしてください。おそらく、おそらくjQueryプラグインとして簡単にパッケージ化できます。あなたはそれを歓迎します。

また、PHP Function Referenceダッシュボードウィジェットでコードを見たい場合は、これも同じです。

Answer 4

本当の選択ボックスとマッチングオプションテキストの半ばに基づいて「jqueryのオプションフィルター」、試してみてください。diyism

Answer 5

ため http://plugins.jquery.com/project/jquery_options_filter

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

EDIT：新しい開発！

「Chosenは長く、扱いにくい選択ボックスよりユーザーフレンドリーにするJavaScriptプラグインです。これは、両方のjQueryとプロトタイプの味で現在利用可能です。」

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

Answer 6

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

Answer 7

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

ここで '#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); 
} 

Answer 8

$(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>