<select >
<option value="something">something</option>
<option value="something_else">something else</option>
</select>
<input type="text" >
Sehingga ketika pengguna memasukkan sesuatu, hanya opsi dengan nilai yang sesuai dengan input yang akan ditampilkan.
Contoh 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">
Demo langsung di sini: http://www.lessanvaezi.com/filter-select-list-options/
Saya tidak yakin mengapa Anda memiliki lebih dari satu opsi dengan nilai yang sama, tetapi ini berfungsi
$(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">
Ini adalah solusi sederhana di mana Anda mengkloning opsi daftar dan menyimpannya dalam sebuah objek untuk pemulihan nanti. Skrip membersihkan daftar dan hanya menambahkan opsi yang berisi teks masukan. Ini juga harus bekerja lintas browser. Saya mendapat bantuan dari postingan ini: https://stackoverflow.com/a/5748709/542141
Html
<input id="search_input" placeholder="Type to filter">
<select id="theList" class="List" multiple="multiple">
atau pisau cukur
@Html.ListBoxFor(g => g.SelectedItem, Model.items, new { @class = "List", @id = "theList" })
script
<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>