jquery過濾器（keyup綁定..功能）soo簡單但它並不工作

這是jQuery代碼，應該隱藏li> a's，不包含文本輸入中的匹配值。 Theres是一個函數，用於檢查輸入的關鍵字，並查看div（s）？匹配值。jquery過濾器（keyup綁定..功能）soo簡單但它並不工作

然後SUPPOSED隱藏輸入中沒有包含值的那些。

<input type="text" id="targety" placeholder="Filter Items..." /> 
<ul id="ded"> 
<li><a href="#">Acura</a></li> 
<li><a href="#">Audi</a></li> 
<li><a href="#">BMW</a></li> 
<li><a href="#">Cadillac</a></li> 
<li><a href="#">Ferrari</a></li> 
</ul> 

</div> 


<script> 
$('#targety').bind('keyup', function() { 
if($("#targety").val() == ""){ 
$("#ded > li > a").show(); 
}else{ 

$("#ded > li > a:visible:not(:contains('"+$("#targety").val()+"')").hide("fast"); 
} 

}); 
</script>

來源

2012-05-02 user1066546

看起來你只是缺少你選擇一個括號：

... :contains('" + $("#targety").val() + "'))") ... 
              ^

順便說一句，你可以使用this代替"#targety"回調裏面。

來源

2012-05-02 00:45:03

有一點要注意的是，「：包含」是大小寫敏感的你可以找到一個函數，雖然說，「未來」的問題在這裏工作：https://stackoverflow.com/a/2196683/1220302

至於你的代碼，我建議你在設置最小長度你的輸入框。這是一個例子 - 這是一個有點冗長的學習。正如你所看到的，我也隱藏了「父母」「李」。

<script type="text/javascript"> 
    $(document).ready(function() { 
     var $container = $("#ded"); //Set the container 
     $('#targety').bind('keyup', function() { 
      var value = $(this).val(); 
      if (value.length >= 3) { 
       var filter = "> li a:visible:not(:contains('" + value + "'))"; 
       console.log("Found: " + $(filter).length); console.log(filter); //Debug logging - remove 
       $(filter, $container).hide("fast").parent().hide("fast"); //hide "a" and "li" 
      } else { 
       $("> li > a", $container).show().parent().show();//show"a" and " 
      } 
     }); 
    }); 
</script>

來源

2012-05-02 01:44:40 anAgent

我得到它的工作方式如下：

$(function(){ 
    var $targety = $("#targety"), 
     $anchors = $("#ded >li a"); 
    $targety.on('keyup', function() { 
     var val = $targety.val(); 
     $anchors.show(); 
     if (val !== "") { 
      var pattern = new RegExp('^' + val, 'i'); 
      $anchors.not(function(index) { 
       return $(this).text().match(pattern); 
      }).hide(); 
     } 
    }); 
});

見fiddle

注：

KEYUP處理效率是非常重要的。這關乎的是我能做到的效率。特別是，它裏面沒有創建jQuery對象。
RegExp可以通過使用.toLowerCase()和.indexOf()來避免。（並且是的it's faster）
我放棄了:visible和hide("fast")贊成hide()使代碼完全同步。否則，打字速度可能（並且很可能會）擊敗原始邏輯。
無條件.show()允許在輸入字符串逐漸刪除時重新顯示元素。

編輯：

修正 - .not()所以我的第一個音符的最後一句是不正確的返回一個新的jQuery對象。但是，$anchors.not(...)將比$（...）更有效，它將從整個DOM作爲其基準工作。

來源

2012-05-02 01:57:38

Downvoter - 沒有理由，downvotes是一樣好無用。 –

jquery過濾器（keyup綁定..功能）soo簡單但它並不工作

回答

相關問題