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