Làm cách nào để tạo hộp văn bản bộ lọc tìm kiếm trong Jquery?

Question

Giả sử tôi có một cấu trúc div với một textbox:

<input id="filter" type="text" name="fname" /><br /> 
<input type="text"> 
<div id="listofstuff"> 
    <div class="anitem"> 
     <span class="item name"Dog</span> 
     <span class="itemdescruption">AboutItem1</span> 
    </div> 
    <div class="anitem"> 
     <span class="item name">Doodle Bird</span> 
     <span class="itemdescruption">AboutItem2</span> 
    </div> 
    <div class="anitem"> 
     <span class="item name">Cat</span> 
     <span class="itemdescruption">AboutItem3</span> 
    </div> 
</div> 

Tôi muốn làm cho nó để ban đầu .. nói nó cho thấy 3 anitems, tôi muốn làm cho nó để nếu người dùng có bất kỳ ký tự gõ vào hộp tìm kiếm, nó sẽ chỉ hiển thị các div khớp với mục nhập mà người dùng đang nhập.

Ví dụ: Vì vậy, nếu người dùng nhập "D", nó sẽ ẩn tất cả các div khác mà không có "D" trong "tên mục". Nếu người dùng nhập một chữ cái khác "og", thì div duy nhất sẽ được hiển thị là div có "tên mục" của "Chó" Nếu người dùng nhấn phím xóa để xóa "g", thì hai div "Chó" và "Chim Doodle" sẽ được hiển thị. Nếu người dùng xóa mọi thứ họ đã nhập vào hộp văn bản, thì tất cả các anitems sẽ hiển thị.

Làm cách nào để thực hiện điều này nếu có thể? Tôi nghĩ rằng tôi có thể phải sử dụng .live() nhưng tôi thực sự không chắc chắn.

Answer 1

Bạn sẽ phải xử lý sự kiện keyup (được nhấp sau khi phím được phát hành) sau đó sử dụng .filter() để tìm các mục phù hợp, hiển thị cha mẹ của chúng.

$("#filter").bind("keyup", function() { 
    var text = $(this).val().toLowerCase(); 
    var items = $(".item_name"); 

    //first, hide all: 
    items.parent().hide(); 

    //show only those matching user input: 
    items.filter(function() { 
     return $(this).text().toLowerCase().indexOf(text) == 0; 
    }).parent().show(); 
}); 

Live test case.

Answer 2

Bạn muốn để xử lý các sự kiện KeyUp và tôi nghĩ rằng bạn có thể làm điều này:

$('div').each(function() { 
    $(this).toggle($(this).children('span.itemname').text() == yourVar); 
}); 

Answer 3

Nếu bạn muốn lọc như các loại sử dụng, bạn nên đính kèm một xử lý sự kiện để của textbox keypress^{[API Ref]} sự kiện. Mỗi lần người dùng nhấn một phím, bạn có thể filter^{[API Ref]} nội dung của #listofstuff và một trong hai show^{[API Ref]} hoặc hide^{[API Ref]} nó.