दिलचस्प पोस्ट
Win32 के तहत भ्रष्टाचार भ्रष्टाचार; कैसे पता लगाने के लिए? वस्तुओं / एरे की गहरी तुलना jQuery के .load () IE में काम नहीं कर रहा है – लेकिन फ़ायरफ़ॉक्स, क्रोम और सफारी में ठीक है कैसे एक समारोह के लिए एक तर्क के रूप में सरणी को पारित करने के लिए bash मैं यूआरएल से डाउनलोड किए बिना एमपी 3 कैसे चला सकता हूं? jQuery अक्षम / सबमिट बटन सक्षम करें shared_ptr संदर्भ या मूल्य से? आप अपने छोटे से पुन: प्रयोज्य cffunctions कैसे व्यवस्थित करते हैं? onActivityResult () नए नेस्टेड खंड एपीआई में नहीं बुलाया मैं HTML टैग से एट्रिब्यूट कैसे निकाल सकता हूं? मैं यूनिक्स में एक स्वैच्छिक स्क्रिप्ट को कैसे दाम कर सकता हूं? विज़ुअल स्टूडियो डीबगर विज़ुअलाइजर्स को समय से कैसे बाहर रखना है? फ्लक्स ऐप में एजेक्स अनुरोध को कहाँ बनाया जाना चाहिए? बैच की फाइलें: एक फाइल कैसे पढ़ सकती है? समापन की सटीक परिभाषा क्या है?

कैसे jQuery के साथ <select> के गतिशील फिल्टर विकल्प?

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

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

Solutions Collecting From Web of "कैसे jQuery के साथ <select> के गतिशील फिल्टर विकल्प?"

उदाहरण 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"> 

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

 $(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"> 

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

 $(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(); } }); }); }); 

यह एक सरल समाधान है, जहां आप सूचियों के विकल्प को क्लोन करते हैं और बाद में पुनर्प्राप्ति के लिए किसी ऑब्जेक्ट में उन्हें रखें। स्क्रिप्ट सूची को साफ करती है और केवल उन विकल्पों को जोड़ती है जिनमें इनपुट टेक्स्ट शामिल होता है इसे क्रॉस ब्राउज़र भी काम करना चाहिए। मुझे इस पोस्ट की कुछ मदद मिली: 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> 

विकल्पों की विशेषताओं को रखने के लिए लेसन के उत्तर भी अपडेट करें।

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

 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) ); } }); }); }); }; 

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

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

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

 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) ); } }); }; 
 <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> 

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

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

 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"); } };