Question

目前我有过滤选择文字的代码，如下所示。

当我在搜索框中输入文本时，它正在过滤。但是我需要在文本框中搜索选项而不进行过滤，如下所示。

<script src="./jquery.min.js"></script>
<script>
    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().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;
                }
            });            
        });
    };

    $(function() {
        $('#select').filterByText($('#textbox'), true);
    });  
</script>

In body tag 

<select id="select" size=10>
<option value="12">12</option>
<option value="1234567890">1234567890</option>
<option value="ARADHYA">ARADHYA</option>
<option value="HI">HI</option>
<option value="APPLE">APPLE</option>
</select>
<input id="textbox" type="text">

FIDDLE DEMO

Answer 1

您的代码会发生很大变化。

首先，select必须具有multiple属性。 javascript只需要设置匹配选项的selected属性。我创造了一个小提琴，以显示它的工作，但它基本上归结为：

...
if (search == '') {
   $options.prop('selected', false);
   return;
}
$options.each(function() {
    var $option = $(this);
    $option.prop('selected', $.trim($option.text()).match(regex) !== null);
});
...

在if语句中，当输入为空时，清除选择框。不需要再执行任何操作，因此它会立即中断事件回调（返回）。然后jQuery的each函数用于遍历选项，并根据正则表达式选择或取消选择它们。

See the fiddle

Answer 2

我就是这样做的（完整代码）：

$('#textbox').keyup(function () {
    if ($('#textbox').val() != '') {
        $('option').each(function () {
            if ($(this).text().toLowerCase().match(new RegExp($('#textbox').val().toLowerCase())) != null) {
                $(this).attr("selected", "selected");
            } else {
                $(this).removeAttr("selected");
            }
        });
    } else {
        $('option').each(function () {
            $(this).removeAttr("selected");
        });
    }
});

Here is the JSFiddle demo

在Jquery中选择按搜索文本

2 个答案: