通过输入搜索值过滤列表的简单方法

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调用。 我如何编写一个简单且较少代码的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/