<select >
<option value="something">something</option>
<option value="something_else">something else</option>
</select>
<input type="text" >
因此,当用户输入内容时,只会显示与输入值匹配的选项。
答案 0 :(得分:81)
示例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/
答案 1 :(得分:11)
我不确定为什么你有多个具有相同值的选项,但这可行
$(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">
答案 2 :(得分:6)
与其他所有人略有不同,但我认为这是最简单的:
$(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();
}
});
});
});
答案 3 :(得分:3)
这是一个简单的解决方案,您可以克隆列表选项并将其保留在对象中以便以后恢复。脚本清除列表并仅添加包含输入文本的选项。这也应该跨浏览器工作。我从这篇文章得到了一些帮助:https://stackoverflow.com/a/5748709/542141
<强> HTML 强>
<input id="search_input" placeholder="Type to filter">
<select id="theList" class="List" multiple="multiple">
或razor
@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>
答案 4 :(得分:3)
比其他大多数解决方案更简单的代码。查找文本(不区分大小写)并使用CSS隐藏/显示内容。比存储数据副本好多了。
将选择框的id和包含过滤器的输入的id传递给此方法。
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");
}
};
答案 5 :(得分:0)
更新Lessan的答案,同时保留选项的属性。
这是我第一次回答Stack Overflow,所以不确定我是否应该编辑他的答案或创建自己的答案。
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)
);
}
});
});
});
};
答案 6 :(得分:0)
您可以使用select2插件来创建此类过滤器。通过这一批可以避免编码工作。您可以从https://select2.github.io/
获取插件这个插件应用起来非常简单,甚至可以轻松完成高级工作。 :)
答案 7 :(得分:0)
我遇到了类似的问题,因此我更改了接受的答案,以制作更通用的功能版本。我以为我会把它留在这里。
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)
);
}
});
};
答案 8 :(得分:0)
<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>
答案 9 :(得分:0)
使用亚伦的答案,这可能是最简单的解决方案:
function filterSelectList(selectListId, filterId)
{
var filter = $("#" + filterId).val().toUpperCase();
$("#" + selectListId + " option").each(function(i){
if ($(this).text.toUpperCase().includes(filter))
$(this).css("display", "block");
else
$(this).css("display", "none");
});
};
答案 10 :(得分:0)
如今,一种更简单的方法是使用jquery filter()如下:
var options = $('select option');
var query = $('input').val();
options.filter(function() {
$(this).toggle($(this).val().toLowerCase().indexOf(query) > -1);
});
答案 11 :(得分:0)
对Lessan Vaezi的上述出色回答进行了微小的修改。我遇到了需要在选项条目中包含属性的情况。原始实现会丢失所有标签属性。以上版本的答案保留了选项标签的属性:
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(),
attrs: this.attributes, // Preserve attributes.
});
});
$(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) {
var new_option = $('<option>').text(option.text).val(option.value);
if (option.attrs) // Add old element options to new entry
{
$.each(option.attrs, function () {
$(new_option).attr(this.name, this.value);
});
}
$(select).append(new_option);
}
});
});
});
};