使用 jQuery 将动态文本输入值与数据属性进行比较

Question

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

HTML

<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逻辑。

使用 jQuery 将动态文本输入值与数据属性进行比较

Use jQuery to compare dynamic text input value against data attribute

regex

jquery

pattern-matching

string-comparison

preg-match