Простой способ отфильтровать список по входному значению поиска

Question

Я следующий вид перечислять плоды, и я могу фильтровать те текстовым значением входного

это фрагмент кода для этого

@Html.TextBoxFor(m => m.SearchKey, new {@id ="SearchKey" })  
@Html.ListBox("L", new MultiSelectList(Model.FruitList, "Id", "Name"), new { multiple = "multiple", id = "FruitList" }) 

В этом сценарии фильтрации я использовал следующие два варианта.

Вариант 1

  $(function() { 
       $('#FruitList').filterByText($('#SearchKey'), true); 
      }); 

      jQuery.fn.filterByText = function (textbox, selectSingleMatch) { 

       return this.each(function() 
       { 
        var select = this; 
        var options = []; 

        $(select).find('option').each(function() 
        { 
         options.push({value: $(this).val(), text: $(this).text()}); 
        }); 

        $(select).data('options', options); 

        $(textbox).bind('change keyup', function() 
         { 
          var options = $(select).empty().scrollTop(0).data('options'); 
          var search = $.trim($(this).val()); 
          var regex = new RegExp(search,'gi'); 

         $.each(options, function (i) 
         { 
          var option = options[i]; 

          if (option.text.match(regex) !== null) 
          { 
           $(select).append($('<option>').text(option.text).val(option.value)); 
          } 
         }); 

         if (selectSingleMatch === true && $(select).children().length === 1) 
         { 
          $(select).children().get(0).selected = true; 
         } 
        }); 
       }); 
      }; 

Вариант 2

  $(function() { 
       var fruitSelect = $("#FruitList"), 
        searchField = $("#SearchKey"), 
        options = FruitList.find("option").clone(); // clone into memory 

       // generic function to clean text 
       function sanitize(string) 
       { 
        return $.trim(string).replace(/\s+/g, ' ').toLowerCase(); 
       } 

       // prepare the options by storing the 
       // "searchable" name as data on the element 
       options.each(function() 
       { 
        var option = $(this); 
        option.data("sanitized", sanitize(option.text())); 
       }); 

       // handle keyup 
       searchField.on("keyup", function (event) 
       { 
        var term = sanitize($(this).val()),matches; 

        // just show all options, if there's no search term 
        if (!term) 
        { 
         fruitSelect.empty().append(options.clone()); 
         return; 
        } 

        // otherwise, show the options that match 
        matches = options.filter(function() 
        { 
         return $(this).data("sanitized").indexOf(term) != -1; 
        }).clone(); 

        fruitSelect.empty().append(matches); 

       }); 
      }); 

      function rearrangeList(list) 
      { 
       $(list).find("option").sort(byValue).appendTo(list); 
      } 

Но это, кажется, больше строки кода, есть ли простой способ для достижения этой цели?

Без перехода на бэкэнд ajax call. Как я могу написать простую и меньше коды JQuery для фильтра этого списка путем ввода строки поиска

Answer 1

Давайте предположим, что HTML генерируемый подобно этому

<input type="text" id="filterText" /> 
<br/> 
<select multiple> 
    <option>apples</option> 
    <option>apricots</option> 
    <option>blueberry</option> 
    <option>acai</option> 
    <option>bananas</option> 
    <option>cherry</option> 
</select> 

Тогда ниже JS делает фильтр следует

$('#filterText').on('keyup', function() { 
    var filterWord = $(this).val().toLowerCase(); 
    $('select').find('option').show() 
    $('select').find('option').not(':contains('+filterWord+')').hide() 
}); 

После нажатия клавиши на входном тексте он автоматически отображает параметры, а затем скрывает те, которые не содержат этих символов.

https://jsfiddle.net/a7u9fo9q/1/