Question

我有一个名为myul的列表（无论如何）

<ul id="myul">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
</ul>

并使用<input id="filter" type="text" value=""/>

过滤其项目

并且脚本基于jquery


    jQuery.expr[':'].containsLower = function(a, i, m) {
      return jQuery(a).text().toUpperCase()
         .indexOf(m[3].toUpperCase()) >= 0;    // for uppercase-lowercase support
    };

    $('#filter').keyup(function(){
      $('ul#myul li').hide().filter(':containsLower("'+this.value+'")').fadeIn(); 

    // shows only the items that have input value and that too on keyup function
    });

它可以过滤关键功能列表，但我希望它也可以在字符串上工作是URL哈希，所以我使用


    $(window).load(function () {
        var hash = window.location.hash.substring(1);  // removes the #
        document.getElementById('filter').value = hash; // adds hash string to filter input
    });

但它不会过滤列表（考虑到url已经存在的哈希），即使我在窗口加载（而不是keyup）上运行过滤器功能。它只是隐藏所有列表项。我想让它在窗口加载时工作，而不是键盘..

任何想法？

Answer 1

单独设置文本框的值不会做任何事情。您需要触发函数binder到keyup。

$(window).load(function () {
    var hash = window.location.hash.substring(1);  // removes the #
    document.getElementById('filter').value = hash; // adds hash string to filter input
    $('#filter').trigger('keyup'); // trigger a keyup manually
});

或者您可以创建一个接受搜索键的常规函数，并使用keyup和窗口加载的相应值调用它。像

这样的东西

jQuery.expr[':'].containsLower = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
     .indexOf(m[3].toUpperCase()) >= 0;    // for uppercase-lowercase support
};


function displayMatches(value){
  $('ul#myul li').hide().filter(':containsLower("'+value+'")').fadeIn();
}

$('#filter').keyup(function(){
 displayMatches(this.value)
})

$(window).load(function () {
    var hash = window.location.hash.substring(1);  // removes the #
    displayMatches(hash)
});

基于URL哈希字符串过滤列表

1 个答案: