4

我开始了使用 Javascript 创建类似 iTunes 的搜索的旅程。我了解了 jQuery，并在 StackOverflow 上的一些人的帮助下，我取得了成功。

我回到这里与您分享一种基于用户输入创建动态隐藏/显示列表的非常简单的方法。

Let's search!

完整的教程代码可以在这里找到。

它的 JSFiddle 就在这里！

4

3 回答 3

2

首先，创建一个简单的 div 布局，在 div 和上方的搜索栏中包含一些文本。

    <div class="search_bar">
      <form><!--The Field from which to gather data-->
        <input id="searchfield" type="text" onclick="value=''" value="Case Sensitive Search">
      </form>
    </div>
    <!--Containers With Text-->
    <div class="container">
      <div class="container_of_hc">
        <div class="horizontal_containers">Cat</div>
        <div class="color">Black</div>
        <div class="color">White</div>
        <div class="color">Orange</div>
      </div>
      <div class="horizontal_containers">Dog</div>
      <div class="horizontal_containers">Rat</div>
      <div class="horizontal_containers">Zebra</div>
      <div class="horizontal_containers">Wolf</div>
    </div>

CSS：

      .container {
        width: 100%;
      }
      .horizontal_containers {
        height:10%;
        border: solid 3px #B30015;
        font-size: 45px;
        text-align: center;
      }

其次，您将使用 jQuery 创建一个脚本。请记住标题说这是一个动态搜索，这意味着（对我们而言）我们希望使用键入的每个键来更新搜索：

$("#searchfield").keyup(function() {

注意：需要选择器复习吗？

然后我们将变量设置为#searchfield 中的值：

  var str = $("#searchfield").val();  //get current value of id=searchfield

为了确保在搜索字段中没有任何内容时显示列表中的所有 div，我们根据新变量 (str) 的长度创建一个 if 语句：

  if (str.length == 0) {
    //if searchfield is empty, show all
    $(".horizontal_containers").show();
  }

最后，如果 str 的长度不为 0，我们会实际隐藏 div：

  else {
    //if input contains matching string, show div
    //if input does not contain matching string, hide div
    $("div:contains('" + str + "').horizontal_containers").show();
    $("div:not(:contains('" + str + "')).horizontal_containers").hide();
  }
});

div:contains()anddiv:not(:contains())语句用于设置条件。它本质上是一个 if 语句。他们搜索包含在 div 中的文本，而不是 div 属性。如果要搜索更深的 div 结构，可以在脚本的 jQuery 语句中使用多个选择器，如下所示：

if (str.length == 0) {
//if searchfield is empty, show all
  $(".container .color").show();
  } else {
    //if input contains matching string, show div
    //if input does not contain matching string, hide div
    $(".container div:contains('" + str + "').color").show();
    $(".container div:not(:contains('" + str + "')).color").hide();
  }

替换您已经尝试过的脚本语句。

注意：div 的嵌套结构必须与选择器中的嵌套结构相匹配。

基本上就是这样。如果您有改进的技巧，知道如何将其更改为不区分大小写的搜索，或者您能想到的任何其他内容，请告诉我！

感谢 MrXenoType，我学会了 :contains 函数不区分大小写。

要为此项目创建不区分大小写的搜索，只需添加：

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

这会为 contains 函数创建一个伪。将此代码放在您的其他脚本之上（在同一脚本中），以仅适用于该脚本。

于 2012-11-20T02:44:18.223 回答
2

很高兴看到尼克在这个实验中取得了成功。在学习如何做这件事上做得很好:)

万一您还没有遇到过这个 jquery 插件，您可能也想看看它，它被称为快速搜索。

https://github.com/riklomas/quicksearch

我已经在许多页面上使用过它，它就像一个魅力。示例： http: //fedmich.com/works/types-of-project.htm

于 2012-11-20T03:49:36.493 回答
1

尝试：

$.expr[":"].contains_nocase = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

用于使用 jQuery 1.8 添加 :contains_nocase() 选择器

于 2012-11-20T03:36:53.940 回答