jQuery 过滤和切换搜索

Question

我有多个聊天记录作为联系人卡片，并且我有一个用于搜索他们的联系号码的搜索框。对于我的搜索框，我使用 onKeydown 进行搜索，例如 whatsapp 搜索与号码的联系人。 但是我的搜索没有按预期工作，搜索将显示全部或隐藏我的所有聊天记录。

如何搜索号码并显示正确的聊天记录。

<div class="contactlist-container">

    <div id="chatlog" value="0105653762">
        <div class="chatlog-avatar">
            <img src="res/images/user-avatar.png" style="height: 40px; width: 40px;"/>
        </div>
        <div class="chatlog-contact">
            <div id="chatlog-contactnumber">
                <span>
                    010-565 3762
                </span>
            </div>
            <div id="chatlog-lastchat">
                <span>
                    Hello there
                </span>
            </div>
        </div>
    </div>

    <div id="chatlog" value="010777777">
        <div class="chatlog-avatar">
            <img src="res/images/user-avatar.png" style="height: 40px; width: 40px;"/>
        </div>
        <div class="chatlog-contact">
            <div id="chatlog-contactnumber">
                <span>
                    010-777 7777
                </span>
            </div>
            <div id="chatlog-lastchat">
                <span>
                    Hello there, Welcome to our customer service system.
                </span>
            </div>
        </div>
    </div>

    <div id="chatlog" value="010888888">
        <div class="chatlog-avatar">
            <img src="res/images/user-avatar.png" style="height: 40px; width: 40px;"/>
        </div>
        <div class="chatlog-contact">
            <div id="chatlog-contactnumber">
                <span>
                    010-888 8888
                </span>
            </div>
            <div id="chatlog-lastchat">
                <span>
                    Welcome, my name is Kinabalu
                </span>
            </div>
        </div>
    </div>

</div>

jQuery:

$('.search-container input#chatsearch').on("keyup", function(){
    var number = $(this).val().toLowerCase();
    $('#chatlog #chatlog-contactnumber span').filter(function(){
        $('.contactlist-container #chatlog').toggle($('#chatlog-contactnumber span')
            .text().toLowerCase().indexOf(number) >  -1);
    });
    //
    //  Something gonna edit here, cant target current chatlog
    //
});

Answer 1

请试试这个 您在 HTML 中犯了一些错误，请检查以下代码。

<div class="contactlist-container" id="chatlog_container">
  <div class="chatlog" value="0105653762">
    <div class="chatlog-avatar">
      <img src="res/images/user-avatar.png" style="height: 40px; width: 40px;"/>
    </div>
    <div class="chatlog-contact">
      <div class="chatlog-contactnumber">
        <span>010-565 3762</span>
      </div>
      <div id="chatlog-lastchat">
        <span>Hello there</span>
      </div>
    </div>
  </div>

  <div class="chatlog" value="010777777">
    <div class="chatlog-avatar">
      <img src="res/images/user-avatar.png" style="height: 40px; width: 40px;"/>
    </div>
    <div class="chatlog-contact">
      <div class="chatlog-contactnumber">
        <span>010-777 7777</span>
      </div>
      <div id="chatlog-lastchat">
        <span>Hello there, Welcome to our customer service system.</span>
      </div>
    </div>
  </div>

  <div class ="chatlog" value="010888888">
    <div class="chatlog-avatar">
      <img src="res/images/user-avatar.png" style="height: 40px; width: 40px;"/>
    </div>
    <div class="chatlog-contact">
      <div class="chatlog-contactnumber">
        <span>010-888 8888</span>
      </div>
      <div id="chatlog-lastchat">
        <span>Welcome, my name is Kinabalu</span>
      </div>
    </div>
  </div>
</div>

jquery函数

$('.search-container input#chatsearch').on("keyup", function(){
    var number = $(this).val();
    $('#chatlog_container .chatlog .chatlog-contact .chatlog-contactnumber span').filter(function(){
        $(this).parent().parent().parent().toggle($(this).text().indexOf(number) > -1);
    });
});