jQuery के साथ <select > के डायनामिक फ़िल्टर विकल्प कैसे करें?

Question

<select > 
<option value="something">something</option> 
<option value="something_else">something else</option> 
</select> 
<input type="text" > 

ताकि जब उपयोगकर्ता कुछ इनपुट करता है, तो केवल इनपुट मिलान वाले मान के साथ विकल्प दिखाए जाएंगे।

Answer 1

मुझे यकीन है कि तुम क्यों एक ही मूल्य के साथ एक से अधिक विकल्प नहीं हूँ, लेकिन यह काम करता है

$(document).ready(function() { 
 
    $('input').change(function() { 
 
    var filter = $(this).val(); 
 
    $('option').each(function() { 
 
     if ($(this).val() == filter) { 
 
     $(this).show(); 
 
     } else { 
 
     $(this).hide(); 
 
     } 
 
     $('select').val(filter); 
 
    }) 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option value="something1">something1</option> 
 
    <option value="something1">something1</option> 
 
    <option value="something2">something2</option> 
 
    <option value="something2">something2</option> 
 
    <option value="something2">something2</option> 
 
    <option value="something3">something3</option> 
 
    <option value="something3">something3</option> 
 
    <option value="something3">something3</option> 
 
</select> 
 
<input type="text" placeholder="something1">

Answer 2

उदाहरण HTML:

//jQuery extension method: 
 
jQuery.fn.filterByText = function(textbox) { 
 
    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) 
 
     ); 
 
     } 
 
     }); 
 
    }); 
 
    }); 
 
}; 
 

 
// You could use it like this: 
 

 
$(function() { 
 
    $('select').filterByText($('input')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option value="hello">hello</option> 
 
    <option value="world">world</option> 
 
    <option value="lorem">lorem</option> 
 
    <option value="ipsum">ipsum</option> 
 
    <option value="lorem ipsum">lorem ipsum</option> 
 
</select> 
 
<input type="text">

लाइव डेमो यहां: http://www.lessanvaezi.com/filter-select-list-options/

Answer 3

यह एक साधारण समाधान है जहां आप सूचियों के विकल्पों को क्लोन करते हैं और उन्हें बाद में पुनर्प्राप्ति के लिए किसी ऑब्जेक्ट में रखते हैं। स्क्रिप्ट सूची को साफ़ करती है और इनपुट विकल्प वाले केवल वे विकल्प जोड़ती है। यह क्रॉस ब्राउज़र भी काम करना चाहिए। मैं इस पोस्ट से कुछ मदद मिल गया: https://stackoverflow.com/a/5748709/542141

एचटीएमएल

<input id="search_input" placeholder="Type to filter"> 
<select id="theList" class="List" multiple="multiple"> 

या रेजर

@Html.ListBoxFor(g => g.SelectedItem, Model.items, new { @class = "List", @id = "theList" }) 

स्क्रिप्ट

<script type="text/javascript"> 
    $(document).ready(function() { 
    //copy options 
    var options = $('#theList option').clone(); 
    //react on keyup in textbox 
    $('#search_input').keyup(function() { 
     var val = $(this).val(); 
     $('#theList').empty(); 
     //take only the options containing your filter text or all if empty 
     options.filter(function (idx, el) { 
     return val === '' || $(el).text().indexOf(val) >= 0; 
     }).appendTo('#theList');//add it to list 
    }); 
    }); 
</script> 

Answer 4

विकल्प के गुणों को रखने के लिए लेसन का उत्तर अपडेट करें।

यह पहली बार स्टैक ओवरफ़्लो पर जवाब देने वाला है, इसलिए मुझे यकीन नहीं है कि मुझे अपना जवाब संपादित करना चाहिए या अपना खुद का बनाना चाहिए।

jQuery.fn.allAttr = function() { 
    var a, aLength, attributes, map; 
    if (!this[0]) return null; 
    if (arguments.length === 0) { 
    map = {}; 
    attributes = this[0].attributes; 
    aLength = attributes.length; 
    for (a = 0; a < aLength; a++) { 
     map[attributes[a].name.toLowerCase()] = attributes[a].value; 
    } 
    return map; 
    } else { 
    for (var propin arguments[0]) { 
     $(this[0]).attr(prop, arguments[0][prop]); 
    } 
    return this[0]; 
    } 
}; 


jQuery.fn.filterByText = function(textbox) { 
    return this.each(function() { 
    var select = this; 
    var options = []; 
    $(select).find('option').each(function() { 
     options.push({ value: $(this).val(), 
     text: $(this).text(), 
     allAttr: $(this).allAttr() }); 
    }); 
    $(select).data('options', options); 

    $(textbox).bind('change keyup', function() { 
     var search = $.trim($(this).val()); 
     var regex = new RegExp(search, "gi"); 

     $.each($(select).empty().data('options'), function(i, option) { 
     if (option.text.match(regex) !== null) { 
      $(select).append(
      $('<option>').text(option.text) 
      .val(option.value) 
      .allAttr(option.allAttr) 
     ); 
     } 
     }); 
    }); 
    }); 
}; 

Answer 5

थोड़ा अन्य सभी के लिए अलग अलग है, लेकिन मुझे लगता है कि यह सबसे सरल है:

$(document).ready(function(){ 

    var $this, i, filter, 
     $input = $('#my_other_id'), 
     $options = $('#my_id').find('option'); 

    $input.keyup(function(){ 
     filter = $(this).val(); 
     i = 1; 
     $options.each(function(){ 
      $this = $(this); 
      $this.removeAttr('selected'); 
      if ($this.text().indexOf(filter) != -1) { 
       $this.show(); 
       if(i == 1){ 
        $this.attr('selected', 'selected'); 
       } 
       i++; 
      } else { 
       $this.hide(); 
      } 
     }); 
    }); 

}); 

Answer 6

आप Select2 इस तरह के एक फिल्टर बनाने के लिए प्लगइन का उपयोग कर सकते हैं। इस कोडिंग कोड के बहुत से बचा जा सकता है। आप https://select2.github.io/

से प्लगइन को पकड़ सकते हैं यह प्लगइन लागू करने के लिए बहुत आसान है और यहां तक ​​कि उन्नत काम भी आसानी से किया जा सकता है। :)

Answer 7

मुझे इस तरह की एक ही समस्या थी, इसलिए मैंने फ़ंक्शन का अधिक सामान्य संस्करण बनाने के लिए स्वीकृत उत्तर को बदल दिया। मैंने सोचा कि मैं इसे यहाँ छोड़ दूंगा।

var filterSelectOptions = function($select, callback) { 

    var options = null, 
     dataOptions = $select.data('options'); 

    if (typeof dataOptions === 'undefined') { 
     options = []; 
     $select.children('option').each(function() { 
      var $this = $(this); 
      options.push({value: $this.val(), text: $this.text()}); 
     }); 
     $select.data('options', options); 
    } else { 
     options = dataOptions; 
    } 

    $select.empty(); 

    $.each(options, function(i) { 
     var option = options[i]; 
     if(callback(option)) { 
      $select.append(
       $('<option/>').text(option.text).val(option.value) 
      ); 
     } 
    }); 
}; 

Answer 8

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<script language='javascript'> 
jQuery.fn.filterByText = function(textbox, selectSingleMatch) { 
    return this.each(function() { 
    var select = this;`enter code here` 
    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; 
     } 
    }); 
    }); 
}; 

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

Answer 9

बहुत सरल कोड तो अन्य समाधान के सबसे। टेक्स्ट (केस असंवेदनशील) की तलाश करें और सामग्री को छुपाने/दिखाने के लिए सीएसएस का उपयोग करें। डेटा की एक प्रति स्टोर करने से काफी बेहतर है।

इस विधि में चयनित बॉक्स की आईडी और फ़िल्टर युक्त इनपुट की आईडी को पास करें।

function FilterSelectList(selectListId, filterId) 
{ 
    var filter = $("#" + filterId).val(); 
    filter = filter.toUpperCase(); 

    var options = $("#" + selectListId + " option"); 
    for (var i = 0; i < options.length; i++) 
    { 
     if (options[i].text.toUpperCase().indexOf(filter) < 0) 
      $(options[i]).css("display", "none"); 
     else 
      $(options[i]).css("display", "block"); 
    } 
};