Question

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MFA Father</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
   /* This CSS is just for presentational purposes. */
.extend{max-width: 100%; max-height: 100%;}
.clear{clear: both; float: none;}
.bgwhite{background: #ffffff;}
.center{margin-left: auto; margin-right: auto;}
.display_block{display: block;}
.display_none{display: none}
.align_left{float: left;}
.align_right{float: right;}

#searchbox_container input[type="text"]{
 bacground: #ffffff;
 border: 1px solid #cccccc;
 padding: 8px;
 color: #555555;
}
#searchbox_container input[type="text"]:focus{
 outline: none; 
}
.infodata{
 margin: 5px; 
}
.infodata h1{
  font-size: 15px;
  padding: 0px;
  margin: 0px 0px 3px 0px;
  text-align: center;
  text-transform: uppercase;
}
.infodata p{
  font-size: 10px;
  padding: 0px;
  margin: 0px;
  text-align: center;
  text-transform: uppercase;
}
.infodata img{
  width: 125px;
  height: 125px;
  margin-bottom: 5px
}
</style>
</head>
<body>
  <div class="extend clear" id="searchbox_container">
    <input type="text" name="searchnow" placeholder="Search here..." value="" class="extend clear display_block align_right" /> 
  </div>
<div class="extend clear bgwhite extend center" id="mainwrapper">
  <div class="extend clear" id="info_data_container">
    <div class="infodata extend display_block align_left" data-name="Jason Acapela">
      <img src="img/user1.jpg" class="extend clear display_block center" alt="" width="125" height="125" title="Jason Acapela">
      <h1>Jason Acapela</h1>
      <p>Web Developer</p>
    </div> <!-- end of .infodata -->
    <div class="infodata extend display_block align_left" data-name="Derrick Tour">
      <img src="img/user1.jpg" class="extend clear display_block center" alt="" width="125" height="125" title="Derrick Tour">
      <h1>Derrick Tour</h1>
      <p>UI/UX</p>
    </div> <!-- end of .infodata -->
    <div class="infodata extend display_block align_left" data-name="Mechelle Hill">
      <img src="img/user1.jpg" class="extend clear display_block center" alt="" width="125" height="125" title="Mechelle Hill">
      <h1>Mechelle Hill</h1>
      <p>System Developer</p>
    </div> <!-- end of .infodata -->
  </div> <!-- end of #info_data_container -->
</div> <!-- end of #mainwrapper -->
<script language="javascript" type="text/javascript">
$('.infodata').hide(); 
$(document).ready(function(){
  $('[name="searchnow"]').on('input', function(){
    var that = $(this);
    $('.infodata').hide();
  $('.infodata').each(function(){
    if($(this).attr('data-name').toUpperCase().indexOf(that.val().trim().toUpperCase()) > -1){
      $(this).show();
      }
    });
  });
});
</script>
</body>
</html>

＆＃13;

我希望jQuery搜索能够搜索特定内容并显示结果，然后再次隐藏它们。

This post修复了我的部分问题。另一个问题是，当网站满载时，只应出现搜索框，并隐藏搜索数据。所以我尝试用CSS样式隐藏它们并使用display="none"。

你可以看到我在做什么here。

如您所见，页面右上角只有一个搜索框。当您输入J字符时，您将看到搜索结果，但是当您删除J字符时，您将看到每个项目都出现！我不想要那个。我希望所有其他项目在我们搜索时仍然隐藏和显示。我发现的另一件事是我希望搜索使用项目名称的第一个字符检查输入字符。我的意思是，例如当我们有四个具有以下名称的项目时：（James，Jacob，Jack，Jason），当你在搜索框中输入J时，它会显示所有这些，但是当你输入Jac时，它必须显示两个项目，当你单独放置任何其他角色时，没有任何东西显示你！

我有兴趣使用单独的按钮，当我点击它时，所有项目都会出现，当我再次点击它时，项目就会消失。

Answer 1

将您的js代码修改为：

$('.infodata').hide();

$(document).ready(function(){
    $('[name="searchnow"]').keyup(function(){
        var that = $(this);
        var input_length = that.val().length;

        if(input_length > 0){
            $('.infodata').each(function(){
                if($(this).attr('data-name').toUpperCase().indexOf(that.val().trim().toUpperCase()) > -1){
                    $(this).show();
                }
            });
        } else {
            $('.infodata').hide();
        }

        console.log(input_length);

    });
});

请参阅检查控制台的运行以了解更多信息 https://jsfiddle.net/5aoaszek/1/

Answer 2

此行中存在逻辑错误：

if($(this).attr('data-name').toUpperCase().indexOf(that.val().trim().toUpperCase()) > -1){

问题是字符串中空字符串的索引是0，而不是-1。所以，每个项目都满足这个条件。

将该行更改为：

if(that.val() && $(this).attr('data-name').toUpperCase().indexOf(that.val().trim().toUpperCase()) > -1){

这是有效的，因为空字符串是假的。

表示条件将在空字符串上失败，因为您只是隐藏了所有元素，所以它们将保持隐藏状态。

如果您只想匹配名称的开头，请将其更改为：

    if(that.val() && $(this).attr('data-name').toUpperCase().indexOf(that.val().trim().toUpperCase()) === 0){

jQuery智能搜索显示/隐藏内容元素

2 个答案: