jquery實時搜索

我想知道如果有人可以幫我解決我遇到的jQuery問題。下面的代碼是一個片段我在另一篇文章中找到，但我期待去適應它稍微jquery實時搜索

Jquery的

$(document).ready(function() { 
$('#criteria').on("input", function(e) { 
    var words = $(this).val().toLowerCase().match(/\S+/g); 
    if (!words) { 
     $('.links li').show(); 
    } else { 
     $('.links li').each(function() { 
      var text = $(this).text().toLowerCase(); 
      var show = false; 
      $.each(words, function(i, word) { 
       show = show || Boolean(~text.indexOf(word)); 
      }); 
      $(this).toggle(show); 

     }); 
    } 
}); 

}); // end document ready

和HTML

<ul class="links"> 
<li><a href="#">link 1</a></li> 
    <li><a href="#">link 2</a></li> 
    <li><a href="#">link 3</a></li> 
    <li><a href="#">link 4</a></li> 
</ul>

現在，這就像它應該，它在輸入字段中查找匹配，並通過隱藏不匹配的鏈接來相應地過濾結果。我想要做的不是使用切換，而是添加一個類到沒有匹配的li元素，使它們使用css淡入淡出。我試過使用$（顯示）.addclass（）;而不是$（this）.toggle（show）;但它似乎並沒有做任何事情，即時通訊假設因爲變量顯示沒有使用，但當我試圖一類效果變量顯示它什麼都不做

來源

2012-10-23 Greyhamne

我有一個小的建議。爲什麼你已經使用大編碼到搜索特定text在li。只需簡單地使用contains即可根據文本搜索元素。使用toggleClass像下面。

您的要求可以通過以下編碼完成。

$('#criteria').on("input", function(e) { 
    $('.links li:not(:has(a:contains("link 1")))').toggleClass("className"); 

});

DEMO

來源

2012-10-23 12:57:14 YogeshWaran

，你必須聯繫1是有可能有說的輸入框（「鏈接1」）的變成價值（input.val（）），而不是 – Greyhamne

要接受這個答案我設法使用你所建議的方法得到我想要的東西，這是一個基本的演示http://jsfiddle.net/VwCTp/59/我將在 – Greyhamne

上展開的內容@Greyhamne：好的演示:) – YogeshWaran

只需使用.toggleClass()添加創建一個類與CSS顯示：無/不透明度：0.0

http://api.jquery.com/toggleClass/

來源

2012-10-23 12:31:43

jquery實時搜索

回答

相關問題