7

我在一个网站上工作，我有一个页面包含这样构建的人员列表：

<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 我需要执行以下操作：

当用户开始在文本框中输入时，“名称”不包含字符的 div 会消失（某种动态过滤器，您只会看到名称中包含书写字符的人）

所以逻辑应该是这样的：

当用户在文本框中键入一个字符（或删除一个字符）时，我们循环遍历所有“person” div，如果该“person”中的“name”div 包含我们显示的字符，否则我们隐藏它（.show( ) 和 jquery 中的 .hide())

当然，如果文本框为空，我们会显示所有内容。

这可以做到吗？

谢谢你的帮助

4

7 回答 7

7

在每次击键时，您可以.toggle()each.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);
    });
});​

根据需要修改表达式。在这个版本中，它检查名称是否以输入的值开头，并忽略大小写。

演示

于 2012-06-27T15:04:32.240 回答
1

这里有一些东西可以帮助您入门。我敢肯定它远非完美，但您还没有展示您已经尝试过的内容以及您的问题出了什么问题。

$("#filterTextBox").on("keyup", function () {
    var search = this.value;
    $(".person").show().filter(function () {
        return $(".name", this).text().indexOf(search) < 0;
    }).hide();        
});​​​​​​​​​​​​​

这是一个工作示例。

于 2012-06-27T15:03:09.833 回答
0

既然你用jQuery标记了这个，我强烈推荐他们的Autocomplete UI Control。我已经在几个项目中使用了它，您可以更新搜索功能以使用这样的本地数据存储。作为旁注，您可能需要考虑使用<ul>'s 和<li>'s ...

代码示例

//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);             
    }
});
于 2012-06-27T15:00:07.030 回答
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()
})
于 2012-06-27T15:03:34.633 回答
0

最近我需要这种类型的工作，我找到了一个很好的解决方案。在我选择的元素旁边查看这个jQuery popout div

于 2013-07-16T20:12:01.420 回答
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();

    } );
} );

我希望这能帮到您

于 2018-01-20T09:03:09.557 回答
-1

这是您应该考虑使用和创建的脚本。您还应该使用<ul>and <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);
于 2012-06-27T15:02:34.567 回答