JS jQuery的搜索和输入名称

Question

离开时，我看到有这样的代码在我的html：应显示整个窗体

<form> 
     <div style="width:530px; height:220px; overflow-y:scroll;"> 

       <div class="people"> 
       <label class="checkbox_1" for="1"> 
        <img src="1.jpg" /> 
        <span> 
        Jolly Bob Monumir 
        </span> 
       </label> 
       <input type="checkbox" name="people[]" value="1" id="1" /> 
       </div> 

       <div class="people"> 
       <label class="checkbox_1" for="2"> 
        <img src="2.jpg" /> 
        <span> 
        Jonathan Monumir 
        </span> 
       </label> 
       <input type="checkbox" name="people[]" value="2" id="4" /> 
       </div> 

       <div class="people"> 
       <label class="checkbox_1" for="3"> 
        <img src="3.jpg" /> 
        <span> 
        Misoury Crow 
        </span> 
       </label> 
       <input type="checkbox" name="people[]" value="3" id="3" /> 
       </div> 

       <div class="people"> 
       <label class="checkbox_1" for="4"> 
        <img src="4.jpg" /> 
        <span> 
        Michael Crow 
        </span> 
       </label> 
       <input type="checkbox" name="people[]" value="4" class="checkbox_1" id="4" /> 
       </div> 

     </div>     
    </form> 

页面加载后。现在我想输入框，当我在这个框中键入人名字母时，它应该自动显示那些包含我输入字母的名字（带有“people”类的div）。

例如：我输入“Jo”，应该显示带有Jolly Bob Monumir和Jonathan Monumir的div，其他应该保持隐藏状态。然后当我输入“Cro”时，Misoury Crow和Michael Crow应该是可见的。等等。我如何用jQuery来做到这一点？在此先感谢

更新： 我发现这个，它的作品就像一个魅力！

$('#search-criteria').on('keyup', function(){ 
    $('div.people').hide(); 
    var txt = $('#search-criteria').val(); 
    $('div.people').each(function(){ 
     if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){ 
      $(this).show(); 
     } 
    }); 
}); 

Answer 1

更新： 我发现这个，它的作品就像一个魅力！

$('#search-criteria').on('keyup', function(){ 
    $('div.people').hide(); 
    var txt = $('#search-criteria').val(); 
    $('div.people').each(function(){ 
     if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){ 
      $(this).show(); 
     } 
    }); 
}); 

Answer 2

我认为你正在寻找类似的jqueryuiautocomplete。

Answer 3

我说，你键入input场：

<input type="text" id="people_name"> 

和jQuery代码：

$('input#people_name').on('keyup', function() { 
    var value = this.value.trim(); 
    if(value.length) { 
     $('div.people span').filter(function() { 
      return new RegExp(value, 'i').test($(this).text()); 
     }).closest('div.people').show(); 
    } else $('div.people').hide(); 
}); 

DEMO

注：您可以使用任何自动完成插件。