使用jQuery比较动态文本输入值和数据属性

Question

我有一个输入字段，用于与数据属性进行比较。我想使用regex将用户输入与keyup上的数据属性进行比较。

<input type="text" class="form-control" id="text-filter" placeholder="Search by Name">

<div class="row">
    <div class="col-sm-4 item" data-name="Clark Kent">
        <div class="mbs-item-inner">
            /* Content Goes Here */
        </div>
    </div>
    <div class="col-sm-4 item" data-name="Peter Parker">
        <div class="mbs-item-inner">
            /* Content Goes Here */
        </div>
    </div>
    <div class="col-sm-4 item" data-name="Bruce Wayne">
        <div class="mbs-item-inner">
            /* Content Goes Here */
        </div>
    </div>    
</div>

jQuery

$('#text-filter').on('keyup', function(){
    var $this = $(this),
        text_filter_value = $this.val().toLowerCase();

    $('.item').each(function(index, element) {
        var name =  $(this).data('name').toLowerCase();       


        /* This only displays an .item when there is an exact match
         * but I want every item that contains similar pattern matches to be displayed
         * 
         * In other words if a user starts typing 'Pe' 
         * then I want the 'data-name="Peter Parker" .item to be displayed
         * I'm assuming I need to use regex for this but I'm unsure as,
         * how I should implement it
         */        
        if(text_filter_value === name) {
            $(this).show('slow');
        } else if(text_filter_value === '') {
            // If text input is empty show all
            $(this).show('slow');
        } else {
            $(this).hide('slow');
        }

    });

});

任何帮助将不胜感激，并请包括工作代码示例，如果可能的话。

Answer 1

实际上，有两种方法可以做到。

​

<div class="row">
    <div class="col-sm-4 item" data-name="Clark Kent">
        <div class="mbs-item-inner">
            /* Content Goes Here - Clark Kent */
        </div>
    </div>
    <div class="col-sm-4 item" data-name="Peter Parker">
        <div class="mbs-item-inner">
            /* Content Goes Here - Peter Parker */
        </div>
    </div>
    <div class="col-sm-4 item" data-name="Bruce Wayne">
        <div class="mbs-item-inner">
            /* Content Goes Here - Bruce Wayne*/
        </div>
    </div>    
</div>

方法1:在键入时寻找准确的匹配。使用字符串比较。

$('#text-filter').on('keyup', function(){
    var $this = $(this),
        text_filter_value = $this.val().toLowerCase();

    $('.item').each(function(index, element) {
        var name =  $(this).data('name').toLowerCase();       

        var charLength = text_filter_value.length;
        if(name.substring(0,charLength).toLowerCase() ===       text_filter_value.substring(0,charLength).toLowerCase()) {
            $(this).show('slow');
        } else if(text_filter_value === '') {
            // If text input is empty show all
            $(this).show('slow');
        } else {
            $(this).hide('slow');
        }

    });

});

http://jsfiddle.net/jdn283cj/1/

方法2:随处找到的文本:使用indexOf()

$('#text-filter').on('keyup', function(){
    var $this = $(this),
        text_filter_value = $this.val().toLowerCase();

    $('.item').each(function(index, element) {
        var name =  $(this).data('name').toLowerCase();       


        if(name.indexOf(text_filter_value) != -1) {
            $(this).show('slow');
        } else if(text_filter_value === '') {
            // If text input is empty show all
            $(this).show('slow');
        } else {
            $(this).hide('slow');
        }

    });

});

http://jsfiddle.net/jdn283cj/

在这两个例子中，您不需要正则表达式。只是简单的js逻辑。