我正在一个网站上工作, 我有一个页面,其中包含这样构建的人员列表:
<div class="personsMenu">
<div class="person">
<div class="name">John</div>
<div class="age">18</div>
</div>
<div class="person">
<div class="name">Kate</div>
<div class="age">24</div>
</div>
<div class="person">
<div class="name">Tom</div>
<div class="age">17</div>
</div>
</div>
我还有一个文本框<input type="Text" id="filterTextBox"/>
使用jquery我需要执行以下操作:
当用户开始在文本框中键入时,“name”不包含字符的div消失(某种动态过滤器,您只看到名字中包含书写字符的人)
所以逻辑应该是这样的:
当用户在文本框中键入一个字符(或删除一个字符)时,我们遍历所有“person”div,如果“person”中的“name”div包含我们显示的字符,否则我们将其隐藏( jquery中的.show()和.hide())
当然,如果文本框为空,我们会显示所有内容。
可以这样做吗?
感谢您的帮助
答案 0 :(得分:7)
在每次按键时,你可以.toggle()
每个.person
,传递一个变量,指示它是否与当前值匹配,然后显示。
$('.my-textbox').keyup(function() {
var value = $(this).val();
var exp = new RegExp('^' + value, 'i');
$('.personsMenu .person').each(function() {
var isMatch = exp.test($('.name', this).text());
$(this).toggle(isMatch);
});
});
根据需要修改表达式。在此版本中,它会使用输入的值检查名称是否已启动,并忽略大小写。
答案 1 :(得分:1)
这是让你入门的东西。我确信它远非完美,但你没有展示你已经尝试过的东西以及你的问题出了什么问题。
$("#filterTextBox").on("keyup", function () {
var search = this.value;
$(".person").show().filter(function () {
return $(".name", this).text().indexOf(search) < 0;
}).hide();
});
答案 2 :(得分:0)
由于您使用 jQuery 标记了这一点,我强烈推荐他们的Autocomplete UI Control。我已在几个项目中使用它,您可以更新搜索功能以使用此类本地数据存储。作为旁注,您可能需要考虑使用<ul>
和<li>
的...
代码示例
//Search-As-You-Type
$(id).find('input').autocomplete({
minLength: 2,
focus: function( event, ui ) {},
select: function( event, ui ) {},
source: function(request, response){
//here is where you want to call your custom function
findSite(request.term);
}
});
答案 3 :(得分:0)
$('input').keyup(function(){
var value = this.value
$('.person')
.hide()
.children('.name')
.filter(function(){
var re = new RegExp(value)
return re.test($(this).text())
})
.parent()
.show()
})
答案 4 :(得分:0)
最近我需要这种类型的工作,我找到了一个很好的解决方案。见jQuery popout div next to element of my choice
答案 5 :(得分:0)
此代码搜索整个字符串
$( '#input-text' ).keyup( function () {
var value = $( this ).val();
$( '#filter-parant > .filter-div' ).each( function () {
$('.filter-div:contains("' + value + '")').show();
$('.filter-div:not(:contains("' + value + '"))').hide();
} );
} );
我希望这会对你有所帮助
答案 6 :(得分:-1)
这是您应该考虑使用和创建的脚本。您还应该使用<ul>
和<li>
。
(function($){
$.tzFilter = function(jq, phrase, type, column, ifHidden){
var new_hidden = false;
if(this.last_phrase === phrase){
return false;
}
if(!type){
type = 'ul';
}
var phrase_length = phrase.length;
var words = phrase.toLowerCase().split(' ');
var matches = function(elem){
elem.show()
}
var noMatch = function(elem){
elem.hide();
new_hidden = true
}
var getText = function(elem){
return elem.text()
}
if(column){
var index = null;
if(type == 'table'){
jq.find('thead > tr:last > th').each( function(i){
if( $.trim($(this).text()) == column ){
index = i; return false;
}
});
} else if (type == 'ul'){
jq.find("li").each(function(i){
if(!$(this).attr('display', 'none')){
if( $.trim($(this).text()) == column ){
index = i; return false;
}
}
});
}
if(index == null){
throw('Index non trouvée: ' + column + '')
}
if(type == 'table'){
getText = function(elem){
return jQuery(elem.find(('td:eq(' + index + ')') )).text();
}
} else if (type == 'ul') {
getText = function(elem){
return jQuery(elem.find(('"li:eq(' + index + ')') )).text();
}
}
}
// On a simplement ajouté une lettre, on va regarder pour le nouveau mot, sans devoir tout regarder à nouveau
if((words.size > 1) && (phrase.substr(0, phrase_length - 1) === this.last_phrase)){
if(phrase[-1] === ' '){
this.last_phrase = phrase;
return false;
}
// On va chercher uniquement pour le nouveau mot
var words = words[-1];
// On cache uniquement les tables visibles
matches = function(elem) {;}
if(type == 'table'){
var elems = jq.find('tbody > tr:visible');
} else if (type == 'ul'){
var elems = jq.find('li:visible');
}
} else {
new_hidden = true;
if(type == 'table'){
var elems = jq.find('tbody > tr')
} else if (type == 'ul') {
var elems = jq.find('li')
}
}
elems.each(function(){
var elem = $(this);
$.tzFilter.has_words(getText(elem), words, false) ? matches(elem) : noMatch(elem);
});
last_phrase = phrase;
if(ifHidden && new_hidden){
ifHidden();
}
return jq;
};
// On cache pour accélérer le tout
$.tzFilter.last_phrase = ""
$.tzFilter.has_words = function(str, words, caseSensitive){
var text = caseSensitive ? str : str.toLowerCase();
for (var i=0; i < words.length; i++){
if(text.indexOf(words[i]) === -1){
return false;
}
}
return true;
}
})(jQuery);