Question

我有一个搜索框和搜索按钮的代码，当我搜索项目（全部隐藏）并按“搜索”时，它将显示如果找到和未找到项目，那么它将多次显示按摩，我只想显示它一次我该怎么办？

$('.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();
    } else {
      document.write("Not Available");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search-criteria" />
<input type="button" id="search" value="search" />
<div class="contact-name">
  <h3><a href="##">11023</a></h3>
</div>
<div class="contact-name">
  <h3><a href="##">IronMan</a></h3>
</div>
<div class="contact-name">
  <h3><a href="##"> Avaialable </a></h3>
</div>
<div class="contact-name">
  <h3><a href="##">Thor</a></h3>
</div>
<div class="contact-name">
  <h3><a href="##">Hulk</a></h3>
</div>
<div class="contact-name">
  <h3><a href="##">Mr.Bean</a></h3>
</div>
<div class="contact-name">
  <h3><a href="##">X-man</a></h3>
</div>
<div class="contact-name">
  <h3><a href="##">Fury</a></h3>
</div>
<div class="contact-name">
  <h3><a href="##">Captain</a></h3>
</div>
<div class="contact-name">
  <h3><a href="##">Hery</a></h3>
</div>
<div class="contact-name">
  <h3><a href="##">Robot</a></h3>
</div>
<div class="contact-name">
  <h3><a href="##">Batman</a></h3>
</div>
<div class="contact-name">
  <h3><a href="##">Super man</a></h3>
</div>

Answer 1

您可以设置标记值以正确方式显示消息。

这是您正在寻找的解决方案。希望它会为您提供帮助

$('.contact-name').hide();
$('#search').click(function() {
    var matchFound = false;
    $('.contact-name').hide();
    var txt = $('#search-criteria').val();
    $('.contact-name').each(function() {
       if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1) {
          matchFound = true;
          $(this).show();
       }
    })
   if(!matchFound){
        document.write("Not Available");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search-criteria" />
<input type="button" id="search" value="search" />
<div class="contact-name"><h3><a href="##">11023</a></h3></div>
<div class="contact-name"><h3><a href="##">IronMan</a></h3></div>
<div class="contact-name"><h3><a href="##"> Avaialable </a></h3></div>
<div class="contact-name"><h3><a href="##">Thor</a></h3></div>
<div class="contact-name"><h3><a href="##">Hulk</a></h3></div>
<div class="contact-name"><h3><a href="##">Mr.Bean</a></h3></div>
<div class="contact-name"><h3><a href="##">X-man</a></h3></div>
<div class="contact-name"><h3><a href="##">Fury</a></h3></div>
<div class="contact-name"><h3><a href="##">Captain</a></h3></div>
<div class="contact-name"><h3><a href="##">Hery</a></h3></div>
<div class="contact-name"><h3><a href="##">Robot</a></h3></div>
<div class="contact-name"><h3><a href="##">Batman</a></h3></div>
<div class="contact-name"><h3><a href="##">Super man</a></h3></div>

Answer 2

您可以具有一个变量，该变量指示是否找到了搜索项。完成搜索循环后，检查此变量的值并打印未找到的消息。

var match = false;

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

if (!match) {
    document.write("Not Available");
}

Answer 3

一个想法是，首先可以给所有div标签赋予“ id”，然后在JS代码中只需检查字符串输入是否与id相同，然后从div中删除隐藏的标签即可。

if ($('#idtagname').val() == txt)
      $('#idtagname').show()

Answer 4

调用一个函数，该函数将显示一个已隐藏的div类，并显示错误。

检查div是否已可见（如果可见），则无需应用任何逻辑。

因为仍然在每个函数中，所以它将被触发的次数与类的元素一样

首先放置这样的东西：

然后代替：

document.write("Not Available");

执行以下操作：

if($('.error').is(":hidden")){
    $('.error').show();
    $('.error').text("There isn't any div to show");
}

我只想在页面中显示一行行

4 个答案: