Jquery: фильтр выпадающего списка при вводе

Question

Я использовал прототип плагина, который фильтрует содержимое выпадающего меню при вводе. Например, если вы ввели «cat» в текстовое поле, в раскрывающемся списке в качестве параметров останутся только элементы, содержащие подстроку «cat».

Кто-нибудь знает плагин jquery, который может это сделать?

Answer 1

Я просто искал что-то похожее, и лучшим из того, что мне нужно, кажется, JQuery UI MultiSelect . Он превращает поля множественного выбора в довольно гладкий вид двойного списка с живой фильтрацией в главном списке.

РЕДАКТИРОВАТЬ: Новая разработка!

" Chosen - это плагин JavaScript, который делает длинные, громоздкие поля выбора более удобными для пользователя. В настоящее время он доступен как в jQuery, так и в Prototype."

В обозримом будущем я полностью использую Выбран во всех проектах с использованием выбора.

Answer 2

Select2 - это довольно недавний форк Chosen и имеет множество дополнительных функций (например, AJAX + пользовательский HTML для отдельных элементов).

Answer 3

Я написал небольшой скрипт для этого несколько лет назад. Это может быть упаковано как плагин jQuery довольно легко, вероятно. Добро пожаловать.

Я также делаю это в моем Справочнике по функциям PHP Виджет панели инструментов, если вы хотите посмотреть код там.

Answer 4

Проверьте эти плагины:

• SexyCombo
• * 1009 Быстрый выбор *
• Фильтр DropList

Answer 5

jQuery автозаполнение плагин

РЕДАКТИРОВАТЬ: Я изначально связался с неправильным плагином автозаполнения.

Answer 6

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

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

Попробуйте «фильтр опций jquery», основанный на реальном поле выбора и сопоставлении в середине текста опций: http://plugins.jquery.com/project/jquery_options_filter

для diyism