Jquery search and display link instantly

Question

i try to make a instant search on a page which shows the user all the anchor links related to value of the search input field. The code works fine accept of the amount of links which begins with an a. My code outputs only one link with an a instead of all links which begins with an a. I hope someone can help me.

Attached my HTML/jquery code

$(document).ready(function(){
 $("#output_result").css("display", "none"); 
 $("#output_result").val("");  
 $('#search').keyup(function(){
  $("#output_result").css("display", "block"); 
  var searchedText = $(this).val(); 
  var result = $("td.myClass:contains('"+searchedText+"')").html(); 

  $("#output_result").html(result);
  console.log(result);

  if( $(this).val().length === 0){
   $("#output_result").css("display", "none");
   $("#output_result").val("");
  }else {
   $("#output_result").css("display", "block");
  }
 });
});

div#output_result {
    border: solid 1px black;
    width: 500px;
    padding: 30px;
 background: lightgray;
}

<!DOCTYPE html>
<html>
 <head>
  <title>MySearch</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 </head>
 
 <body>
  <input type="text" id="search" placeholder="suche nach Standard"/>
  <div id="output_result"></div>
  <br/>
  <table>
   <tr>
   <td class="myClass"><a href="custom_link_1" target="_blank">apple</a></td>
   </tr>
   <tr>
    <td class="myClass"><a href="custom_link_2" target="_blank">ananas</a></td>
   </tr>
   <tr>
    <td class="myClass"><a href="custom_link_3" target="_blank">anchovi</a></td>
   </tr>

   <tr><td class="myClass"><a href="custom_link_4" target="_blank">banana</a></td></tr>
  </table>
 </body>

</html>

score 1 · Answer 1 · answered Mar 21 '17 at 19:41

Your line $("td.myClass:contains('"+searchedText+"')").html() will only return the first match (as the docs state for .html(): "Get the HTML contents of the first element in the set of matched elements"). You need to get the collection of matching element first without the html() part then loop over the results like:

$(document).ready(function() {
  $("#output_result").css("display", "none");
  $("#output_result").val("");
  $('#search').keyup(function() {
    $("#output_result").css("display", "block");
    var searchedText = $(this).val();
    var result = $("td.myClass:contains('" + searchedText + "')");
    var output='';
    for (var i = 0; i < result.length; i++) {
      output += $(result).eq(i).html()+'<br>';
    }
    $("#output_result").html(output);
    if ($(this).val().length === 0) {
      $("#output_result").css("display", "none");
      $("#output_result").val("");
    } else {
      $("#output_result").css("display", "block");
    }
  });
});

div#output_result {
  border: solid 1px black;
  width: 500px;
  padding: 30px;
  background: lightgray;
}

<!DOCTYPE html>
<html>

<head>
  <title>MySearch</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
  <input type="text" id="search" placeholder="suche nach Standard" />
  <div id="output_result"></div>
  <br/>
  <table>
    <tr>
      <td class="myClass"><a href="custom_link_1" target="_blank">apple</a></td>
    </tr>
    <tr>
      <td class="myClass"><a href="custom_link_2" target="_blank">ananas</a></td>
    </tr>
    <tr>
      <td class="myClass"><a href="custom_link_3" target="_blank">anchovi</a></td>
    </tr>

    <tr>
      <td class="myClass"><a href="custom_link_4" target="_blank">banana</a></td>
    </tr>
  </table>
</body>

</html>

Thank you very much. I´ve tried it also with a loop but get always an error. The hint with "you need to get the collection of matching element first without the html() part then loop over the results like" was very useful. now it works fine. Thaks a lot for your help — Celal, Mar 21 '17 at 19:55
Can i ask one more question please. The results depends on the first letter of keyword. Is it possible to change the code so that doesn´t matter if the word is typed in capital or lower case letter? Sorry i forgot to aske the question in my first Post Thanks in advance — Celal, Mar 21 '17 at 20:36
Well, `:contains` is case-sensitive, so that would mean you'd need to find another way to do your searching. JavaScript has `toLowerCase()` and `toUpperCase()` to convert strings to lower or uppercase, but that would only be part of the solution. — j08691, Mar 21 '17 at 20:57
If someone needs a "workaround" here is the code which works for me to make .contains insesitive http://stackoverflow.com/questions/8746882/jquery-contains-selector-uppercase-and-lower-case-issue jQuery.expr[':'].contains = function(a, i, m) { return jQuery(a).text().toUpperCase() .indexOf(m[3].toUpperCase()) >= 0; }; — Celal, Mar 21 '17 at 21:11

score 0 · Answer 2 · answered Mar 21 '17 at 19:46

$(document).ready(function(){
 $("#output_result").css("display", "none"); 
 $("#output_result").val("");  
 $('#search').keyup(function(){
  $("#output_result").css("display", "block"); 
  var searchedText = $(this).val();
    //insert a collection of result, if you call html function, it will only return the first one.
  var result = $("td.myClass:contains('"+searchedText+"')"); 
    //you should have a class for new link, here just for demo purpose 
    result.css({"display":"block"});
  $("#output_result").html(result);

  if( $(this).val().length === 0){
   $("#output_result").css("display", "none");
   $("#output_result").val("");
  }else {
   $("#output_result").css("display", "block");
  }
 });
});

div#output_result {
    border: solid 1px black;
    width: 500px;
    padding: 30px;
 background: lightgray;
}

<!DOCTYPE html>
<html>
 <head>
  <title>MySearch</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 </head>
 
 <body>
  <input type="text" id="search" placeholder="suche nach Standard"/>
  <div id="output_result"></div>
  <br/>
  <table>
   <tr>
   <td class="myClass"><a href="custom_link_1" target="_blank">apple</a></td>
   </tr>
   <tr>
    <td class="myClass"><a href="custom_link_2" target="_blank">ananas</a></td>
   </tr>
   <tr>
    <td class="myClass"><a href="custom_link_3" target="_blank">anchovi</a></td>
   </tr>

   <tr><td class="myClass"><a href="custom_link_4" target="_blank">banana</a></td></tr>
  </table>
 </body>

</html>

Jquery search and display link instantly

2 Answers2