Question

我尝试使用jquery创建一个实时过滤器来隐藏实时文本输入中的div。到目前为止，我有以下内容：

<input type="text" class="form-control" id="filter" name="filter" class="filter">
<div class="media">
    <div class="media-body>
        <h4>Apples</h4>
        ...
    </div>
</div>
<div class="media">
    <div class="media-body>
        <h4>Oranges</h4>
        ...
    </div>
</div>

<script>
    $('#filter').keyup(function () { 
        var filter = $("#filter").val();
        $('.media').each(function(i, obj) {
            if ($('this > .media-body > h4:contains(filter)').length === 0) {
                $(this).css("display","none");
            }
        });
    });
</script>

我希望这样做，以便一旦有人输入＆＃39; o＆＃39;苹果div是隐藏的，但目前它只要输入任何内容就会隐藏所有的div。

另外，我如何才能使其不区分大小写？

Answer 1

非常感谢回答这个问题的所有人 - 最后我选择了Fabrizio Calderan提供的解决方案，但是对它做了一些修改，允许文本过滤器以任意顺序搜索字符串中的单词并且如果用户删除了他们输入的内容，则重新显示以前隐藏的div，我想我会与您分享此修改后的解决方案：

    $('#filter').keyup(function () {
        var filter_array = new Array();
        var filter = this.value.toLowerCase();  // no need to call jQuery here

        filter_array = filter.split(' '); // split the user input at the spaces

        var arrayLength = filter_array.length; // Get the length of the filter array

        $('.media').each(function() {
            /* cache a reference to the current .media (you're using it twice) */
            var _this = $(this);
            var title = _this.find('h4').text().toLowerCase();

            /* 
                title and filter are normalized in lowerCase letters
                for a case insensitive search
             */

            var hidden = 0; // Set a flag to see if a div was hidden

            // Loop through all the words in the array and hide the div if found
            for (var i = 0; i < arrayLength; i++) {
                 if (title.indexOf(filter_array[i]) < 0) {
                    _this.hide();
                    hidden = 1;
                }
            }
            // If the flag hasn't been tripped show the div
            if (hidden == 0)  {
               _this.show();
            }
        });
    });

Answer 2

您需要使用实际值filter正确插值选择器字符串您在$('this > ...中也有拼写错误。

尝试此代码（有一些改进）

$('#filter').keyup(function () {

    var filter = this.value.toLowerCase();  // no need to call jQuery here

    $('.media').each(function() {
        /* cache a reference to the current .media (you're using it twice) */
        var _this = $(this);
        var title = _this.find('h4').text().toLowerCase();

        /* 
            title and filter are normalized in lowerCase letters
            for a case insensitive search
         */
        if (title.indexOf(filter) < 0) {
            _this.hide();
        }
    });
});

Answer 3

尝试

if (!RegExp.escape) {
    RegExp.escape = function (value) {
        return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
    };
}

var $medias = $('.media'),
    $h4s = $medias.find('> .media-body > h4');
$('#filter').keyup(function () {
    var filter = this.value,
        regex;
    if (filter) {
        regex = new RegExp(RegExp.escape(this.value), 'i')
        var $found = $h4s.filter(function () {
            return regex.test($(this).text())
        }).closest('.media').show();
        $medias.not($found).hide()
    } else {
        $medias.show();
    }
});

演示：Fiddle

Answer 4

修改了答案


    var filter = this.value.toLowerCase();  // no need to call jQuery here

    $('.device').each(function() {
        /* cache a reference to the current .device (you're using it twice) */
        var _this = $(this);
        var title = _this.find('h3').text().toLowerCase();

        /* 
            title and filter are normalized in lowerCase letters
            for a case insensitive search
         */
        if (title.indexOf(filter) < 0) {
            _this.hide();
        }
        else if(filter == ""){
            _this.show();
        }
        else{
            _this.show();
        }
    });
});

Answer 5

试试这个 -

if ($('.media-body > h4:contains('+filter+')',this).length  === 0) {
        $(this).css("display","none");
}

Answer 6

这是错误的：

if ($('this > .media-body > h4:contains(filter)').length === 0) {

你应该这样做：

if ($(this).find(' > .media-body > h4:contains('+filter+')').length === 0) {

或者像这样：

if ($(' > .media-body > h4:contains('+filter+')', this).length === 0) {

Answer 7

您需要使用 .children() 以及使用filter连接+变量，因此请使用：

if ($(this).children('.media-body > h4:contains(' + filter +')').length === 0) {
    $(this).css("display","none");
}

而不是：

if ($('this > .media-body > h4:contains(filter)').length === 0) {
    $(this).css("display","none");
}

Answer 8

示例here

$('#filter').keyup(function () { 
    var filter = $("#filter").val();
    $('.media').each(function() {
        $(this).find("h4:not(:contains('" + filter + "'))").hide();
        $(this).find("h4:contains('" + filter + "')").show();
    });
});

Answer 9

您可以将此代码简化为：

$('#filter').keyup(function () {  

    // create a pattern to match against, in this one
    // we're only matching words which start with the 
    // value in #filter, case-insensitive

    var pattern = new RegExp('^' + this.value.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1"), 'i');

    // hide all h4's within div.media, then filter
    $('div.media h4').hide().filter(function() {

        // only return h4's which match our pattern
        return !!$(this).text().match(pattern);

    }).show(); // show h4's which matched the pattern

});

Here's a fiddle

感谢 this answer 表达式以转义值中的特殊字符。

Answer 10

您可以使用此代码。

control

Jquery - 隐藏div的文本过滤器

10 个答案:

Here's a fiddle