jquery - 可以编写一个搜索框，在 div 中搜索特定标签，然后显示/隐藏其他标签？

Question

如果不制作数据库后端，是否可以以某种方式在 html / css 页面上创建一个搜索框，可能所有内容都使用 jquery，也就是说我在页面上有四个 div 框，每个 div 框都包含某些风味文本或关键字. 是否可以制作一个搜索框，当搜索关键字时，它会隐藏不包含该关键字的其他 div 框，然后仅显示那些包含该关键字的 div 框。

我知道并知道 jquery 中的 .hide / .show /.toggle，但是如何开始编写一个简单的搜索框来执行这种功能呢？有人有任何想法或大致方向吗？

Answer 1

$("#search").on("keyup", function() {
    var key = this.value;
    $(".tosearch").each(function() {
       var $this = $(this);
       $this.toggle($(this).text().indexOf(key) >= 0);
    });
});

演示：http: //jsfiddle.net/upsgk/

请注意，这将执行区分大小写的搜索。要忽略大小写，您需要调用几次toLowerCase()。例如http://jsfiddle.net/upsgk/1/

Answer 2

以下是您需要的关键组件的列表：

• inputtxt.value(jQuery: $("input").val()): 返回文本中写入的值input。
• elm.innerHTML(jQuery: $("elm").html())：返回一个包含元素内容的字符串。
• str.indexOf(pattern)pattern: 返回in的第一次出现的索引str。如果pattern中不存在str，则.indexOf()返回 -1。

把它们放在一起，你会得到这样的东西：little link。该代码非常不言自明，但这里是 JavaScript 部分的注释版本：

$("#search").on("keydown keyup keypress change", function() { //when the textbox is changed
    var query = $("#search").val(); //save its content
    $(".box").each(function() { //for each box
        var cur = $(this); //get the current box
        if(cur.html().indexOf(query) == -1) { //see if the current box contains the query
            cur.hide("fast"); //it doesn't; hide it
        }
        else {
            cur.show("fast"); //it does, show it
        }
    });
});

Answer 3

我不想为你做这个项目，但这是一个开始的想法

var query= $('#search').val();
var str = $('#div1').val();

if (str.indexOf(query) >= 0){
   // display box
}
else{
  // hide box
}

Answer 4

是的，有可能。

1. 先听搜索框防止默认使用

   $('input[type="submit"]').click(function(e){e.preventDefault();});

2. 编写代码以获取搜索框值。

3. 隐藏所有 div$("div").css("display","none");

4. 显示所有具有 id 的 div$("#"+valueOfBox").css("display","true");