Question

我对jquery很新，并且希望学习。

我正在尝试开发搜索页面。如果没有匹配，目前没有返回任何内容。我已经尝试了各种片段添加添加消息，但它似乎无法正常工作。

有人可以帮忙吗？

谢谢

 <input type="text" id="search-criteria"/><BR> 
 <input type="button" id="search" value="Policy Search"/><BR> 
 <div  class="contact-name" style='background-color:#f2f2f2'> Daniel </div> 
 <div class="contact-name" style='background-color:#f2f2f2'>david </div>



$('.contact-name').hide();
$('#search').click(function(){
$('.contact-name').hide();
var txt = $('#search-criteria').val();
$('.contact-name').each(function(){
   if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
       $(this).show();
   }
});
});

Answer 1

您需要检查.each循环是否找到了值;如果确实如此，那就提前退出;如果没有，请显示＆＃34;没有结果＆＃34;消息。

<!-- Add this element to the HTML. -->
<div class="no-results">There are no results available.</div>

$(".contact-name, .no-results").hide();
$("#search").click(function() {
  $(".contact-name, .no-results").hide();
  var txt = $("#search-criteria").val();
  var found = false;
  $(".contact-name").each(function() {
    if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1) {
      $(this).show();
      found = true;
      return false;
    }
  });
  if (!found) {
    $('.no-results').show();
  }
});

返回消息 - 文本框中没有结果

1 个答案: