我有以下标记:
<input type="text" id="comboBox" />
<ul id="comboBoxData">
<li>1</li>
<li>12</li>
<li>123</li>
<li>1234</li>
<li>12345</li>
<li>123456</li>
<li>1234567</li>
<li>12345678</li>
</ul>
使用以下JQuery代码:
$(document).ready(function() {
$('#comboBox').bind('keydown keypress keyup change', function () {
var search = $('#comboBox').val();
if (search !== '') {
$('#comboBoxData li').hide();
$('#comboBoxData li[text*=' + search + ']').show();
} else {
$('#comboBoxData li').show();
}
});
});
当我在'comboBox'搜索字段中输入'1'或'12'等文本时,它应该过滤掉其文本中不包含我的搜索数据的所有LI,但由于某种原因它不会显示任何内容。为什么呢?
答案 0 :(得分:6)
您的示例无效,因为文字不是li
的属性。
尝试使用filter()
来搜索文字:
$('#comboBox').bind('keydown keypress keyup change', function() {
var search = this.value;
var $li = $("#comboBoxData li").hide();
$li.filter(function() {
return $(this).text().indexOf(search) >= 0;
}).show();
});
答案 1 :(得分:0)
text
没有li
属性。您可以改为获取text()
属性。<或/>
而不是:
$('#comboBoxData li').hide();
$('#comboBoxData li[text*=' + search + ']').show();
试
$('#comboBoxData li').each(function(){
if ( ($this).text().indexOf(search) > -1 ) $(this).show();
else $(this).hide();
});
答案 2 :(得分:0)
要查找包含复选框中值的元素,您必须遍历每个元素并使用.text()函数来获取标记的文本内容:
$('#comboBoxData li').each(function() {
if ($(this).text().indexOf(search) != -1) {
$(this).show();
}
});
答案 3 :(得分:0)
$(document).ready(function () {
$("#comboBoxData li").hide();
$('#comboBoxData li').each(function (i) {
$(this).attr('data-text', function () {
return $(this).text();
});
});
$('#comboBox').bind('change keypress keyup change', function () {
$("#comboBoxData li").hide();
$('#comboBoxData li[data-text*="' + $.trim($(this).val()) + '"]').show();
});
});
直播演示,请参阅此链接:http://jsfiddle.net/nanoquantumtech/B7NxP/