基于URL哈希字符串筛选列表 [英] Filter list based on URL hash string

问题描述

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

 < ul id =myul> 
< li>项目1< / li> 
< li>第2项< / li> 
< li>第3项< / li> 
< li>第4项< / li> 
< li>第5项< / li> 
< li>第6项< / li> 
< / ul> 
  

我使用< input id =filter =textvalue =/>

脚本基于jquery
$ b $ （），


jQuery.expr ['：']。 （）
.indexOf（m [3] .toUpperCase（））> = 0; //大写 - 小写支持
};
$ b $（'＃filter'）。keyup（function（）{
$（'ul＃myul li'）。hide（）。filter（'：containsLower（'+ this .value +'）'）。fadeIn（）;

//仅显示具有输入值的项目以及关键函数
}）;

它可以过滤键列函数的列表，但是我希望它也可以在字符串上使用URL哈希，所以我使用

 
 
 $（window）.load（function（）{
 var hash = window.location。 hash.substring（1）; //删除＃
 document.getElementById（'filter'）。value = hash; //将hash字符串添加到过滤器输入
}）; 
 
 

但是它不会过滤列表（考虑到已经存在的url中的哈希值），即使我使用过滤器函数运行在窗口加载（而不是关键）。它只是隐藏所有的列表项目。我希望它能够在窗口加载，而不是keyup。

有什么想法？

解决方案

仅仅设置文本框的值不会做任何事情。你需要触发函数绑定到 keyup 。

  $（window ）.load（function（）{
 var hash = window.location.hash.substring（1）; //移除＃
 document.getElementById（'filter'）。value = hash; //添加哈希字符串过滤器输入
 $（'＃filter'）。trigger（'keyup'）; //触发一个手动输入
}）; 
  

或者你可以创建一个通用函数来接受搜索关键字，并用 keyup 和窗口加载。就像

  jQuery.expr ['：']。containsLower = function（a，i，m）{
返回jQuery（a）.text（）。toUpperCase（）
 .indexOf（m [3] .toUpperCase（））> = 0;读读信息范范辛辛
 
 $ b函数displayMatches（value）{
 $（'ul＃myul li'）。hide（）。filter（'：containsLower（'+ value +'）' ）。淡入（）; 
 
 $ b $（'＃filter'）。keyup（function（）{
 displayMatches（this.value）
}）
 
 $（window）.load（function（）{
 var hash = window.location.hash.substring（1）; //移除＃
 displayMatches（hash）
}）; 
  

I have a list named myul (whatever)

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

and i filter its item using <input id="filter" type="text" value=""/>

and script is based on 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
    });

it can filter the list on key up function, but i want it to work also on string is URL hash, so i use

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

but it doesn't filter the list (considering the hash in url already present) even when i make the filter function run on window load (instead of keyup). it just hides all the list items. and i want it to work on window load, not keyup..

any ideas?

解决方案

Simply setting the value of text box alone won't do anything. You need to trigger the function binder to 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
});

Or you could make a general function which accepts the search key and call it with respective values on keyup and window load. Something like

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哈希字符串筛选列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！