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

<!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>

我想和搜索特定的内容，并显示结果，然后再次隐藏他们的能力，一个jQuery搜索。

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

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

因此，如您所见，页面右上方只有一个搜索框。当你输入J字符时，你会看到搜索结果，但是当你删除J字符时，你会看到每个项目都出现！我不想那样。我希望所有其他项目在我们搜索它们时仍然隐藏并出现。我发现的另一件事是，我希望搜索将检查与项目名称的第一个字符的输入字符。我的意思是，例如，当我们有四个项目的名字如下:(詹姆斯，雅各布，杰克，杰森），当你在搜索框中输入J时，它显示所有这些，但是当你输入Jac时，它必须显示你两件东西，当你把任何其他的角色独自一人时，什么也没有显示你！

我有兴趣有一个单独的按钮，当我点击它时，所有项目出现，当我再次点击它时，项目消失。

来源

2016-07-24 R.Tanha

一个建议http://www.redotheweb.com/2013/05/15/client-side-full- text-search-in-css.html我在ycombinator网站上找到了一个教程，它可以帮助你通过纯CSS进行搜索。如果你想尝试它。 – Vuong

或明确的例子了解它http://jets.js.org/ – Vuong

你在这一行中的逻辑错误：

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){

这工作，因为空字符串是falsy。条件将在空字符串上失败，并且由于您只隐藏了所有元素，它们将保持隐藏状态。

如果你只是想名字的开头匹配，将其更改为：

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

来源

2016-07-24 21:07:42

是的，这将解决问题。按照我提到的项目名称搜索字符如何？我发现的另一件事是，我希望搜索将检查与项目名称的第一个字符的输入字符。我的意思是，例如，当我们有四个项目的名字如下:(詹姆斯，雅各布，杰克，杰森），当你在搜索框中输入J时，它显示所有这些，但是当你输入Jac时，它必须显示你两件东西，当你把任何其他的角色独自一人时，什么也没有显示你！ –

啊，所以你不想在名字内部匹配，只在一开始。简单！而不是检查您的搜索值是否大于负值，检查索引是否等于零。我更新了我的答案。 –

就是这样，谢谢马特。 –

修改您的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/

来源

2016-07-24 20:35:52

谢谢，但问题是，它正在搜索项目中的所有字符。我只需要逐个搜索字符。我的意思是，例如，当您搜索A时，它会显示所有具有A的项目！但我想告诉你一个以A开头的例子。例如，当你键入J时，它会向你展示Jason和Jacob以及Jack。之后当你键入Jac时，它会显示你只是Jabob和杰克。 –

我觉得我的方法有问题。不是你的。对不起。现在我发现在那之前，有同样的问题。它没有搜索第一个字符并逐一进行。 –

我在这里修改了https://jsfiddle.net/kk5pf56f/来解决你的问题（在第一个索引中搜索）。 – Vuong

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

回答

相关问题