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>

在“聊天用户”里面我有一个包含所有用户的列表，加载了php

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

Answer 1

问题编辑后

这是一个基于JSFiddle的更新的JSFiddle，其中包括如何使用您的特定用例实现搜索：

JSFiddle

原始答案：

您在问题中遗漏了一些相关信息，例如＆＃34; 来自user-chat-list.php 的HTML是什么样的？＆＃34;因此，很难准确理解您的代码是如何应用的。

尽管如此，这里有一个简单的例子，说明你所提供的内容，你可以修改它来做你想要的。您可以运行以下代码段以查看工作示例：

＆＃13;

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);
  })
});

＆＃13;

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

＆＃13;

在div中搜索文本

1 个答案: