động hiển thị/ẩn div dựa trên đầu vào của textbox

Question

tôi đang làm việc trên một trang web, Tôi có một trang có chứa một danh sách những người được xây dựng như thế này:

<div class="personsMenu"> 
    <div class="person"> 
     <div class="name">John</div> 
     <div class="age">18</div> 
    </div> 
    <div class="person"> 
     <div class="name">Kate</div> 
     <div class="age">24</div> 
    </div> 
    <div class="person"> 
     <div class="name">Tom</div> 
     <div class="age">17</div> 
    </div> 
</div> 

Tôi cũng có một textbox <input type="Text" id="filterTextBox"/>

Sử dụng jquery tôi cần phải làm như sau:

Khi người dùng bắt đầu nhập vào hộp văn bản các divs nơi "tên" không chứa ký tự biến mất (một số loại bộ lọc động, bạn chỉ thấy những người tên có chứa các văn bản mười ký tự)

Vì vậy, logic nên như thế này:

Khi người dùng gõ một nhân vật trong hộp văn bản (hoặc loại bỏ một) chúng ta lặp qua tất cả các divs "người" và nếu "tên" div bên trong rằng "người" chứa các ký tự mà chúng tôi hiển thị, nếu không chúng tôi sẽ ẩn nó (.show() và .hide() trong jquery)

Và dĩ nhiên nếu hộp văn bản trống, chúng tôi hiển thị mọi thứ.

Việc này có thể thực hiện được không?

Nhờ sự giúp đỡ

Answer 1

Tại mỗi tổ hợp phím, bạn có thể .toggle() mỗi .person, đi qua một biến chỉ ra hay không phù hợp với giá trị hiện tại, và do đó sẽ được hiển thị.

$('.my-textbox').keyup(function() { 
    var value = $(this).val(); 
    var exp = new RegExp('^' + value, 'i'); 

    $('.personsMenu .person').each(function() { 
     var isMatch = exp.test($('.name', this).text()); 
     $(this).toggle(isMatch); 
    }); 
});​ 

Sửa đổi biểu thức như bạn thấy phù hợp. Trong phiên bản này, nó kiểm tra rằng tên bắt đầu với giá trị được nhập và bỏ qua vỏ.

Demo

Answer 2

Vì bạn gắn thẻ này với jQuery Tôi rất muốn giới thiệu Autocomplete UI Control của họ. Tôi đã sử dụng nó trên một số dự án và bạn có thể cập nhật chức năng tìm kiếm để sử dụng một kho dữ liệu cục bộ như thế này. Là một mặt lưu ý, bạn có thể muốn xem xét sử dụng <ul> 's và <li>' s ...

Mã số Ví dụ

//Search-As-You-Type 
$(id).find('input').autocomplete({ 
    minLength: 2, 
    focus: function(event, ui) {}, 
    select: function(event, ui) {}, 
    source: function(request, response){ 
     //here is where you want to call your custom function 
     findSite(request.term);    
    } 
}); 

Answer 3

Dưới đây là một kịch bản bạn nên xem xét tôi sử dụng và tạo ra. Bạn cũng nên sử dụng <ul> và <li>.

(function($){ 
    $.tzFilter = function(jq, phrase, type, column, ifHidden){ 
     var new_hidden = false; 
     if(this.last_phrase === phrase){ 
      return false; 
     } 

     if(!type){ 
      type = 'ul'; 
     } 

     var phrase_length = phrase.length; 
     var words = phrase.toLowerCase().split(' '); 

     var matches = function(elem){ 
      elem.show() 
     } 
     var noMatch = function(elem){ 
      elem.hide(); 
      new_hidden = true 
     } 
     var getText = function(elem){ 
      return elem.text() 
     } 

     if(column){ 
      var index = null; 
      if(type == 'table'){ 
       jq.find('thead > tr:last > th').each(function(i){ 
        if($.trim($(this).text()) == column){ 
         index = i; return false; 
        } 
       }); 
      } else if (type == 'ul'){ 
       jq.find("li").each(function(i){ 
        if(!$(this).attr('display', 'none')){ 
         if($.trim($(this).text()) == column){ 
         index = i; return false; 
         } 
        } 
       }); 
      } 

      if(index == null){ 
       throw('Index non trouvée: ' + column + '') 
      } 

      if(type == 'table'){ 
       getText = function(elem){ 
        return jQuery(elem.find(('td:eq(' + index + ')') )).text(); 
       } 
      } else if (type == 'ul') { 
       getText = function(elem){ 
        return jQuery(elem.find(('"li:eq(' + index + ')') )).text(); 
       } 
      } 
     } 

     // On a simplement ajouté une lettre, on va regarder pour le nouveau mot, sans devoir tout regarder à nouveau 
     if((words.size > 1) && (phrase.substr(0, phrase_length - 1) === this.last_phrase)){ 
      if(phrase[-1] === ' '){ 
       this.last_phrase = phrase; 
       return false; 
      } 

      // On va chercher uniquement pour le nouveau mot 
      var words = words[-1]; 

      // On cache uniquement les tables visibles 
      matches = function(elem) {;} 

      if(type == 'table'){ 
       var elems = jq.find('tbody > tr:visible'); 
      } else if (type == 'ul'){ 
       var elems = jq.find('li:visible'); 
      } 
     } else { 
      new_hidden = true; 

      if(type == 'table'){ 
       var elems = jq.find('tbody > tr') 
      } else if (type == 'ul') { 
       var elems = jq.find('li') 
      } 
     } 


     elems.each(function(){ 
      var elem = $(this); 
      $.tzFilter.has_words(getText(elem), words, false) ? matches(elem) : noMatch(elem); 
     }); 

     last_phrase = phrase; 

     if(ifHidden && new_hidden){ 
      ifHidden(); 
     } 
     return jq; 
    }; 

    // On cache pour accélérer le tout 
    $.tzFilter.last_phrase = "" 

    $.tzFilter.has_words = function(str, words, caseSensitive){ 
     var text = caseSensitive ? str : str.toLowerCase(); 
     for (var i=0; i < words.length; i++){ 
      if(text.indexOf(words[i]) === -1){ 
       return false; 
      } 
     } 
     return true; 
    } 
})(jQuery); 

Answer 4

Đây là thứ để bạn bắt đầu. Tôi chắc rằng nó không hoàn hảo, nhưng bạn chưa thể hiện những gì bạn đã thử và những gì đã xảy ra trong câu hỏi của bạn.

$("#filterTextBox").on("keyup", function() { 
    var search = this.value; 
    $(".person").show().filter(function() { 
     return $(".name", this).text().indexOf(search) < 0; 
    }).hide();   
});​​​​​​​​​​​​​ 

Đây là working example.

Answer 5

$('input').keyup(function(){ 
    var value = this.value 
    $('.person') 
    .hide() 
    .children('.name') 
    .filter(function(){ 
     var re = new RegExp(value) 
     return re.test($(this).text()) 
    }) 
    .parent() 
    .show() 
}) 

Answer 6

Gần đây tôi cần loại công việc này và tôi tìm thấy giải pháp tốt.Xem này jQuery popout div next to element of my choice

Answer 7

tìm kiếm Mã này toàn bộ chuỗi

$('#input-text').keyup(function() { 
    var value = $(this).val(); 
    $('#filter-parant > .filter-div').each(function() { 
     $('.filter-div:contains("' + value + '")').show(); 
     $('.filter-div:not(:contains("' + value + '"))').hide(); 

    }); 
}); 

Tôi Hy vọng điều này sẽ giúp bạn