根据搜索显示div [英] Show div depending on a search

问题描述

我有一个脚本的小问题，我想根据搜索查找并显示不同的div。原始脚本是我找到并用于联系人列表的东西，现在我想配置为执行其他操作。
原始代码（JSFiddle）

我的编辑代码：

$（'。Fruit'）。

< script src =https： aaaxax.com ; input type =buttonid =searchvalue =search/>< div class =Fruitid =Apple> < h3>关于苹果的一些文本< / h3>< / div>< div class =Fruitid =Orange> < h3>一些关于桔子的文章< / h3>< / div>

我不知道你是否明白我想要实现的目标......？在这种情况下，我有两个div - Apple和Orange。默认情况下这两个都是隐藏的，但是如果我在搜索字段中输入Apple并按下搜索按钮，则会显示divApple，如果我搜索Orange，那么显然我需要Orangediv显示。如果我搜索了其他东西，任何东西都不会显示，只要没有与搜索字符匹配的id的div即可。

所以基本上我试图建立一个数据库的预加载内容，可以在不重新加载页面的情况下进行搜索和显示。

据我所知，错误是当我试图解决和比较div中的id与JS中第6行的搜索字词相同。有谁知道如何做到这一点，并做到这一点？还是有没有人有另一种解决方案可以执行此任务？

解决方案

问题是因为jQuery对象没有 id 属性。您需要使用 prop（'id'）或者 this.id 。

另请注意，您可以通过使小写匹配的 id 属性改进逻辑，然后将输入转换为小写，然后您可以只需使用普通的选择器，如下所示：

$（'＃search' ）.click（function（）{var txt = $（'＃search-criteria'）。val（）; if（txt）$（'。fruit'）。hide（）。filter（'＃'+ txt.toLowerCase （））。show（）;}）;

水果{display：none;}

< script src = https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js\"></script><input type =textid =search-criteria/ ><输入type =buttonid =searchvalue =search/>< div class =fruitid =apple> < h3>关于苹果的一些文字< / h3>< / div>< div class =fruitid =orange> < h3>一些关于桔子的文字< / h3>< / div>

I have a small problem with a script that I want to find and show different divs depending on a search. The original script is something I found and used for a contact list, and that I now want to configure to do something else. Original code (JSFiddle)

My edited code:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" id="search-criteria" />
<input type="button" id="search" value="search" />
<div class="Fruit" id="Apple">
  <h3>Some text about apples</h3>
</div>
<div class="Fruit" id="Orange">
  <h3>Some text about oranges</h3>
</div>

I don't know if you understand what I'm trying to achieve...? I have, in this case, two divs - Apple and Orange. By default both are hidden, but if I enter Apple for instance in the search field and push the search button, the div "Apple" will show, and if I instead search for "Orange" then obviously I want the "Orange" div to show. If I search for anything else nothing will show, as long as there's not a div with an id that matches the searchword.

So basically I'm trying to build a database of preloaded content that can be searched and shown on the fly without reloading the page.

The error is, as far as I can understand, when I try to address and compare the divs id with the searchword on row 6 in the JS. Does anyone know how to do this, and make this work? Or does anyone have another solution that can perform this task?

解决方案

The issue is because jQuery objects do not have an id property. You need to use prop('id') or just this.id.

Also note that you can improve your logic by making the id attributes you match with lower case, then convert the input to lower case, then you can just use a normal selector, like this:

$('#search').click(function() {
  var txt = $('#search-criteria').val();
  if (txt)
    $('.fruit').hide().filter('#' + txt.toLowerCase()).show();
});

.fruit {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" id="search-criteria" />
<input type="button" id="search" value="search" />
<div class="fruit" id="apple">
  <h3>Some text about apples</h3>
</div>
<div class="fruit" id="orange">
  <h3>Some text about oranges</h3>
</div>

这篇关于根据搜索显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！