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

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