javascript - 在 div 内搜索文本

Question

问题是:我有一个 div 包含了我的所有用户列表。我想制作一个搜索框，但我不想使用 Ajax，所以我开始尝试 JQuery，用于搜索 div 内的文本并隐藏其他结果。我已经尝试过，但我坚持这个:

    //Search Box 
$(document).on('input', "#search-weeazer", function(e){
    console.log('input ativado')
    if($(this).val().length >= 4){
        // if($('#colmeia-chat').html().indexOf($(this).val()) > -1){
        //      console.log('Found')
        // } else {
        //      console.log('Not Found')
        // }
        $('div.chat-users>div').each(function(i,div){
            if($(div).html().indexOf($(div).val()) > -1){
                console.log($(div).html() + ' found: ' + i);
            } else {
                console.log("Not Found")
            }

        });
    }


});

有人知道我该怎么做吗？谢谢!

在我的 HTML 中我有这个:

<div class="chat-users" style="height: 400px;">
            <?php include_once('user-chat-list.php'); ?>
        </div>

在“chat-users”中，我有一个包含所有用户的列表，加载了 php

这里有更多的 HTMl 来显示结构: https://jsfiddle.net/jdqbnz2w/

Answer 1

问题编辑后

这是一个基于您所包含的 JSFiddle 的更新版 JSFiddle，展示了如何根据您的特定用例实现搜索:

JSFiddle

<小时/>

原始答案:

您的问题中缺少一些相关信息，例如“来自 user-chat-list.php 的 HTML 是什么样的？？”因此，很难准确理解您的代码如何应用。

尽管如此，这里有一个根据您提供的内容的简单示例，您可以对其进行修改以实现您想要的功能。您可以运行以下代码片段来查看工作示例:

var $searchBox = $('#search-weeazer');
var $userDivs = $('.chat-users div');

$searchBox.on('input', function() {
  var scope = this;
  if (!scope.value || scope.value == '') {
    $userDivs.show();
    return;
  }

  $userDivs.each(function(i, div) {
    var $div = $(div);
    $div.toggle($div.text().toLowerCase().indexOf(scope.value.toLowerCase()) > -1);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Search:
<input id="search-weeazer">

<p>Users:</p>
<div class="chat-users">
  <div>Tony</div>
  <div>Amber</div>
  <div>Ronald</div>
</div>