Question

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

如果我输入搜索框..“Test1”..那么我应该返回该链接..如果我输入..“Te”..那么我应该返回所有的链接。

我已阅读有关使用.filter但未确定如何实施它的信息。

$("#ButtonSearch").click(function() {
  var textboxValue = $("#SearchLink").val();
  $("a").each(function() {
    // here is where I am stuck.. how do I compare textboxValue to each of the link's text and return a match?
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="SearchLink" />
<input type="submit" value="Search" id="ButtonSearch" />

<h4><a href="#" id="Trig5">General Information</a></h4>
<div class="slider" id="Slide5">
  <ul>
    <li><a href="www.test1.com" target="_blank">Test1</a></li>
    <li><a href="www.test2.com" target="_blank">Test2</a></li>
    <li><a href="www.test3.com" target="_blank">Test3</a></li>
    <li><a href="www.test4.com" target="_blank">Test4</a></li>
    <li><a href="www.test5.com" target="_blank">Test5</a></li>
    <li><a href="www.test6.com" target="_blank">Test6</a></li>
    <li><a href="www.test7.com" target="_blank">Test7</a></li>
    <li><a href="www.test8.com" target="_blank">Test8</a></li>
  </ul>
</div>

Answer 1

要实现此目的，您可以使用filter()方法仅返回包含您要搜索的文字值的元素。

要预先形成不区分大小写的比较，您只需将元素的文本和您要搜索的值转换为相同的大小写，在下面的示例中，我将它们都设置为小写。

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

＆＃13;

$("#ButtonSearch").click(function() {
  var textboxValue = $("#SearchLink").val().toLowerCase();

  if (textboxValue) {
    $("li").hide().filter(function() {
       return $(this).find('a').text().toLowerCase().indexOf(textboxValue) != -1;
    }).show();
  } else {
    $('li').show();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="SearchLink" />
<button id="ButtonSearch">Search</button>

<h4><a href="#" id="Trig5">General Information</a></h4>
<div class="slider" id="Slide5">
  <ul>
    <li><a href="www.test1.com" target="_blank">Test1</a></li>
    <li><a href="www.test2.com" target="_blank">Test2</a></li>
    <li><a href="www.test3.com" target="_blank">Test3</a></li>
    <li><a href="www.test4.com" target="_blank">Test4</a></li>
    <li><a href="www.test5.com" target="_blank">Test5</a></li>
    <li><a href="www.test6.com" target="_blank">Test6</a></li>
    <li><a href="www.test7.com" target="_blank">Test7</a></li>
    <li><a href="www.test8.com" target="_blank">Test8</a></li>
  </ul>
</div>

＆＃13;

请注意，如果框中未输入任何值，则还会再次显示所有li元素。它还将在a元素的文本中的任何位置搜索匹配项。如果您特别只想在文字开头找到匹配项，请将!= -1替换为== 0。

Answer 2

$("#SearchLink").keyup(function() {
  var keyid = $("#SearchLink").val().toLowerCase();
 
    var filter = keyid; 
    count = 0;
   // console.log(filter);
        // Loop through the comment list
        $(".search_area li").each(function(){
 
            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();
 
            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
            }
        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="SearchLink" />


<h4><a href="#" id="Trig5">General Information</a></h4>
<div class="slider" id="Slide5">
  <ul class="search_area">
    <li><a href="www.test1.com" target="_blank">Test1</a></li>
    <li><a href="www.test2.com" target="_blank">Test2</a></li>
    <li><a href="www.test3.com" target="_blank">Test3</a></li>
    <li><a href="www.test4.com" target="_blank">Test4</a></li>
    <li><a href="www.test5.com" target="_blank">Test5</a></li>
    <li><a href="www.test6.com" target="_blank">Test6</a></li>
    <li><a href="www.test7.com" target="_blank">Test7</a></li>
    <li><a href="www.test8.com" target="_blank">Test8</a></li>
  </ul>
</div>

此代码包含不带搜索按钮的实时搜索

Answer 3

解决方案是使用indexOf方法。您必须使用iterate函数hyperlink所有each个元素，并仅显示包含textboxValue的元素。

＆＃13;

$("#ButtonSearch").click(function(){

    var textboxValue = $("#SearchLink").val();
    $('.slider').each(function(){
       var exist=false;
       $(this).find('ul li').each(function(){
         if($(this).find('a').text().toLowerCase().indexOf(textboxValue.toLowerCase())!=-1){
          $(this).show();
          exist=true;
        }
        else
           $(this).hide();
       });
       if(exist==false){
          $(this).prev('h4').hide();
       }
      else{
          $(this).prev('h4').show();
       }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="SearchLink" />
<button type="button" id="ButtonSearch">Click</button>
<h4><a href="#" id="Trig5">General Information</a></h4>
    <div class="slider" id="Slide5">
    <ul>
        <li><a href="www.test1.com" target="_blank">Test1</a></li>
        <li><a href="www.test2.com" target="_blank">Test2</a></li>
        <li><a href="www.test3.com" target="_blank">Test3</a></li>
        <li><a href="www.test4.com" target="_blank">Test4</a></li>
        <li><a href="www.test5.com" target="_blank">Test5</a></li>
        <li><a href="www.test6.com" target="_blank">Test6</a></li>
        <li><a href="www.test7.com" target="_blank">Test7</a></li>
        <li><a href="www.test8.com" target="_blank">Test8</a></li>
    </ul>
</div>
<h4><a href="#" id="Trig6">General Information2</a></h4>
    <div class="slider" id="Slide6">
    <ul>
        <li><a href="www.test1.com" target="_blank">Test1</a></li>
        <li><a href="www.test2.com" target="_blank">Test2</a></li>
        <li><a href="www.test3.com" target="_blank">Test3</a></li>
        <li><a href="www.test4.com" target="_blank">Test4</a></li>
        <li><a href="www.test5.com" target="_blank">Test5</a></li>
        <li><a href="www.test6.com" target="_blank">Test6</a></li>
        <li><a href="www.test7.com" target="_blank">Test7</a></li>
    </ul>
</div>

＆＃13;

Answer 4

首先，小写href和输入值。第二次使用ID LATITUDE LONGITUDE COUNTRY_CD CLUSTER_NAME ID1 10.81583689 78.61898689 IN Cluster_1 ID2 10.81513789 78.61898789 IN Cluster_1 ID3 10.81514889 78.61894889 IN Cluster_1 ID4 10.81523989 78.61898989 IN Cluster_1 ID5 10.81521089 78.61891089 IN Cluster_1 ID6 10.81551189 78.61891189 IN Cluster_1 ID7 10.81551189 78.61791189 IN Cluster_2 ID8 10.81561189 78.61792189 IN Cluster_2 ID9 10.81571189 78.61793189 IN Cluster_2来查看href是否包含如下值：

indexOf

示例：

＆＃13;
＆＃13;
var textboxValue = $("#SearchLink").val().toLowerCase(); $("a").each(function(){ var href = $(this).attr("href").toLowerCase(); if(href.indexOf(textboxValue) !== -1) { // matched } else { // not matched } })
＆＃13;
$("#SearchLink").on("input", function() { var value = $(this).val().toLowerCase(); $("a").each(function() { var href = $(this).attr("href").toLowerCase(); if (href.indexOf(value) !== -1) $(this).css("background", "red"); else $(this).css("background", "white"); }) });
＆＃13;
＆＃13;
＆＃13;

Answer 5

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

试试这个：

$("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();
    }
});

Answer 6

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

$("#ButtonSearch").click(function(e) {
  e.preventDefault();
  var textboxValue = $("#SearchLink").val().toLowerCase();
/*  $("#Slide5 li").each(function() { 
    $(this).toggle($("a[href*=" + textboxValue + "]",this).length>0); 
  });*/
  $("#Slide5 li a").each(function() { 
    $(this).closest("li").toggle($(this).text().toLowerCase().indexOf(textboxValue) !=-1);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="SearchLink" />
<input type="submit" value="Search" id="ButtonSearch" />
<h4><a href="#" id="Trig5">General Information</a></h4>
<div class="slider" id="Slide5">
  <ul>
    <li><a href="www.test1.com" target="_blank">Test1</a></li>
    <li><a href="www.test2.com" target="_blank">Test2</a></li>
    <li><a href="www.test3.com" target="_blank">Test3</a></li>
    <li><a href="www.test4.com" target="_blank">Test4</a></li>
    <li><a href="www.test5.com" target="_blank">Test5</a></li>
    <li><a href="www.test6.com" target="_blank">Test6</a></li>
    <li><a href="www.test7.com" target="_blank">Test7</a></li>
    <li><a href="www.test8.com" target="_blank">Test8</a></li>
  </ul>
</div>

Answer 7

查看https://jsfiddle.net/2nh8aszc/7/

中的解决方案

$("#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();
  }


});

查找与搜索框匹配的链接

7 个答案: