動態顯示基於文本

Question

我在網站上工作， 輸入我有一個包含內置這樣的人的列表的頁面/隱藏DIV：

<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> 

我也有一個文本框<input type="Text" id="filterTextBox"/>

使用jQuery我需要做到以下幾點：

當文本框中的用戶開始輸入的div裏的「名」不包含字符消失（某種動態過濾器，你只看到誰是人名稱包含令狀十個字符）

所以邏輯應該是這樣的：

當用戶在文本框中鍵入一個字符（或通過所有的「人」的div，如果「名」 DIV中刪除一個），我們可以循環那「人」包含了我們表現出來的人物，否則我們隱藏它（.show（）和jQuery中.hide（））

當然如果文本框爲空，我們展示的一切。

可以這樣做嗎？

感謝所有幫助

Answer 1

在每次擊鍵，可以.toggle()每個.person，傳遞變量指示是否它的電流值相匹配，並且因此應被示出。

$('.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); 
    }); 
});​ 

根據需要修改表達式。在此版本中，它會檢查名稱與輸入的值開始，並忽略套管。

Demo

Answer 2

既然你jQuery的標記這個我會極力推薦他們Autocomplete UI Control。我已經在幾個項目中使用過它，您可以更新搜索功能以使用本地數據存儲。作爲一個側面說明，你可能要考慮使用<ul>的和<li>的...

代碼示例

//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

下面是你應該考慮一個腳本，我使用和創建。您還應該使用<ul>和<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

這裏有一些讓你開始。我相信它還不夠完美，但是你還沒有展示你已經嘗試過的東西以及你的問題出了什麼問題。

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

這是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

最近，我需要這種類型的工作，我找到一個很好的解決方案。看到這個jQuery popout div next to element of my choice

Answer 7

此代碼搜索整個字符串

$('#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(); 

    }); 
}); 

我希望這將有助於你