我正在尝试使用div的data-filter属性实现搜索。 这里有一个问题。我想实现类似的搜索。目前它看起来完全匹配。我需要进行更改以使其像搜索一样
<label for="search">Search Input:</label>
<input type="search" name="filter" id="search" value="" />
<div data-filter="vehicle1">vehicle1</div>
<div data-filter="vehicle2">vehicle2</div>
<div data-filter="vehicle3">vehicle3</div>
<div data-filter="vehicle4">vehicle4</div>
<div data-filter="vehicle5">vehicle5</div>
$(document).ready(function() {
$('#search').on('keyup', function() {
var val = $.trim(this.value);
if (val) {
$('div[data-filter]').hide();
$('div[data-filter=' + val + ']').show();
}
if(val.length == 0)
{
$('div[data-filter]').show();
}
});
});
答案 0 :(得分:1)
看看这里:CSS selectors,这就是jQuery选择器的基础。
jQuery使用Attribute Contains Selector
添加了它在你的情况下,这将是这样的:
$('div[data-filter*="' + val + '"]').show();
答案 1 :(得分:0)
也许这会奏效:
var $divs=$("div");
for(var i=0;i<$divs.length;i++){
console.log("div's data-filter",$divs[i]["data-filter"]);
console.log("value",val);
if($divs[i]["data-filter"]
&&($divs[i]["data-filter"].indexOf(val)!==-1)){
$($divs[i]).show();
}
}