Javascript 查找与搜索框匹配的链接

我有一个搜索框，在同一页上我有一个链接列表

如果我在搜索框中键入。。“测试1”。。那么我应该会得到那个链接。。如果我输入。。“Te”。。然后我应该返回所有的链接

我读过有关使用

.filter

的内容，但不确定如何实现它

$（“#按钮搜索”）。单击（函数（）{
var textboxValue=$（“#搜索链接”）.val（）；
$（“a”）。每个（函数（）{
//这就是我被卡住的地方。我如何将textboxValue与每个链接的文本进行比较并返回匹配项？
})
});











首先，将HREF和输入值都小写。然后使用
indexOf
查看href是否包含如下值：

var textboxValue = $("#SearchLink").val().toLowerCase();

$("a").each(function(){
   var href = $(this).attr("href").toLowerCase();
   if(href.indexOf(textboxValue) !== -1) {
       // matched
   } else {
       // not matched
   }
})

示例：


$（“#搜索链接”）。关于（“输入”，函数（）{
var value=$（this.val（）.toLowerCase（）；
$（“a”）。每个（函数（）{
var href=$（this.attr（“href”）.toLowerCase（）；
如果（href.indexOf（值）！=-1）
$（this.css（“背景”、“红色”）；
其他的
$（this.css（“背景”、“白色”）；
})
});



















要实现这一点，可以使用
filter（）
方法仅返回包含正在搜索的文本值的元素

要进行不区分大小写的比较，您只需将元素的文本和正在搜索的值转换为同一大小写，在下面的示例中，我将它们都转换为小写

另外，假设您想隐藏整个
li
元素，而不仅仅是
a
，如果找不到文本，那么我修改了使用的选择器。试试这个：


$（“#按钮搜索”）。单击（函数（）{
var textboxValue=$（“#搜索链接”）.val（）.toLowerCase（）；
if（textboxValue）{
$（“li”）.hide（）.filter（函数（））{
返回$（this）.find（'a'）.text（）.toLowerCase（）.indexOf（textboxValue）！=-1；
}).show（）；
}否则{
$（'li'）.show（）；
}
});

搜寻










您可以轻松完成，而且您离代码太近了

试试这个：

$("li a").each(function(){
    var link = $(this).attr("href");
    if(link.search(textboxvalue)){
         // Here Place code if keyword match
    }else{
        //Here you can hide mismatch link. . . 
        $(this).hide();
    }
});

解决方法是使用
indexOf
方法。您必须使用
每个
函数迭代
所有
超链接
元素，并仅显示包含
textboxValue
的元素


$（“#按钮搜索”）。单击（函数（）{
var textboxValue=$（“#搜索链接”）.val（）；
$（'.slider'）。每个（函数（）{
var-exist=false；
$（this）.find（'ul li'）.each（function（）{
if（$（this）.find（'a'）.text（）.toLowerCase（）.indexOf（textboxValue.toLowerCase（））！=-1）{
$（this.show（）；
存在=真实；
}
其他的
$（this.hide（）；
});
if（exist==false）{
$（this.prev（'h4'）.hide（）；
}
否则{
$（this.prev（'h4'）.show（）；
}
});
});

点击




















$（“#搜索链接”）.keyup（函数（）{
var keyid=$（“#SearchLink”）.val（）.toLowerCase（）；
var-filter=keyid；
计数=0；
//控制台日志（过滤器）；
//循环浏览注释列表
$（“.search_area li”）。每个（函数（）{
//如果列表项不包含文本短语，请将其淡出
if（$（this.text（）.search）（新的RegExp（filter，“i”））<0）{
$（this.fadeOut（）；
//如果短语匹配，则显示列表项并将计数增加1
}否则{
$（this.show（）；
计数++；
}
});
});











2个版本。一个用于href，一个用于文本


$（“#按钮搜索”）。单击（函数（e）{
e、 预防默认值（）；
var textboxValue=$（“#搜索链接”）.val（）.toLowerCase（）；
/*$（“#Slide5 li”）。每个（函数（）{
$（this.toggle（$（$（a[href*=“+textboxValue+”），this.length>0）；
});*/
$（“#Slide5 li a”）。每个（函数（）{
$（this）.closest（“li”）.toLowerCase（）.indexOf（textboxValue）！=-1）切换（$（this）.text（）.toLowerCase（）；
});
})











从

提示：将value和href（或text）的大小写标准化，以比较innerHTML字符串，从而将我的代码与任何关键字（如仅与数字或字符串中包含的任何字符）进行比较。我还有一件事。。正如您所看到的，我的链接位于
h4
元素下（在我的页面上有多个类似于您上面看到的其他部分）。。看到链接的唯一方法是点击标题。。。因此，您提供的唯一问题是，所有标题仍然存在，但只有包含与搜索框值匹配的链接的标题下方才有链接。。有没有办法隐藏
h4
元素，这些元素下面没有与搜索框匹配的链接？@BviLLe_Kid，我在回答中使用了这个功能。请看一看。如果搜索框中的值与
h4
元素下的任何链接都不匹配，是否仍要隐藏
h4
元素？抱歉，响应太晚
$("#ButtonSearch").click(function() {
  var textboxValue = $("#SearchLink").val().toLowerCase();



  $("#Slide5 ul li a").each(function(index,anchorTag) {
    // here is where I am stuck.. how do I compare textboxValue to each of the link's text and return a match?
    if($(this).text().toLowerCase().indexOf(textboxValue.toLowerCase())!=-1){
         // Here Place code if keyword match
         $(this).parent('li').show();
    } else{
        //Here you can hide mismatch link. . . 
        $(this).parent('li').hide();
    }

  });

  if($('#Slide5 ul li').length == $('#Slide5 ul li:hidden').length){
    $("#Trig5").parent('h4').hide();
  } else {
    $("#Trig5").parent('h4').show();
  }


});