Question

$(document).ready(function(){
   $('#seach_name').keyup(function () {
     search_name=$(this).val ();

     $("#names li:contains('" + search_name + "')").addClass('highlight');
   });
});

我做错了什么？ HTML看起来像这样：

<p> Search <br><input id="search_name" type ="text" /> </p>
      <ul id="names">
           <li>Jeffrey Kola</li>
           <li>Jimmy Kola</li>
           <li>Jerry Kola</li>
           <li>Jemimia Kola</li>
      </ul>

Answer 1

你可以这样做

$(document).ready(function() {
  $('#seach_name').keyup(function() {
    search_name = $(this).val().trim();
    //--trim() is used to avoid unwanted space at starting and ending, you can avoid if you don't need it
    $("#names li").removeClass('highlight');
    //--For removing previously highlighted element
    if(search_name.length > 0)
    //--For checking input field is empty or not
        $("#names li:contains(" + search_name + ")").addClass('highlight');
  });
});

.highlight {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="names">
  <li>Jeffrey Kola</li>
  <li>Jimmy Kola</li>
  <li>Jerry Kola</li>
  <li>Jemimia Kola</li>
</ul>
<input type="text" id="seach_name">

Answer 2

这就是我所做的：

$('button').click(function(){
    $("li:contains('"+$('#term').val()+"')").addClass('highlight');
});

Here is the full JSFiddle code and demo

jquery在搜索框中突出显示效果

2 个答案: