使用jQuery缩小文本搜索中的选择选项

Narrow down the select options from Text search using jQuery

本文关键字：选择 选项 搜索 jQuery 缩小 文本 使用      更新时间：2023-09-26

我在选择标签和输入文本框中有一些选项。一旦用户在文本框中输入内容，相关选项应该显示，其余需要隐藏。

    <select size="8" style="width:150;">  
    <option value="something1">Apple</option>  
    <option value="something1">Banana</option>  
    <option value="something2">Mango</option> 
    <option value="something2">Orange</option> 
    <option value="something2">Papaya</option> 
    <option value="something3">Grape</option> 
    <option value="something3">Coco</option> 
    <option value="something3">Chocolate</option> 
 </select>
    <input type="text" >

当我在文本框中输入ap时，应该只有Apple, Papaya可见。请让我知道我如何通过jQuery实现这一点。

demo: https://so.lucafilosofi.com/narrow-down-the-select-options-from-text-search-using-jquery

        $(function() {
               $('input.search').on('change', function() {
                    $(this).prev('select.term').find('option:not(:containsi(' + this.value + '))').hide();
                }).on('keyup', function() {
                    $(this).prev('select.term').find('option:containsi(' + this.value + ')').show().attr('selected', true);
                }).extend($.expr[':'], {
                'containsi' : function(elem, i, match, array) {
                    return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || '').toLowerCase()) >= 0;
                }
            });
        });

我建议你搜索并看看这篇文章:

Jquery: Filter下拉列表，当你输入

或者这个示例URL

http://andrew.hedges.name/experiments/narrowing/

相关文章：