jquery - jQuery 过滤和切换搜索
问题描述
我有多个聊天记录作为联系人卡片,并且我有一个搜索框用于搜索他们的联系号码。对于我的搜索框,我使用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
//
});
解决方案
请试试这个你在你的 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);
});
});
推荐阅读
- c++ - unordered_map 结构化绑定中的推导类型
- xamarin.forms - 嗨,我需要使用 XFMaterial 插件更改 xamarin 表单中的 materialtextfield 对话框选项标题和按钮颜色
- azure - 如何默认 Azure `az` cli 使用 `--query [].name`?
- sas - SAS将带有日期的垂直数据转换为水平数据
- vuejs2 - 如何删除输入查询值文本
- azure-active-directory - 无法使用 beta Graph API 创建带密码的 AAD 应用程序
- webpack - Webpack错误:规则只能有一个结果源(提供使用和加载器)
- ios - 在 SwiftUI 中,我如何知道 Picker 选择何时更改?为什么 didSet 不起作用?
- python - 使用 for 循环附加到列表时出现 MemoryError
- python - 在 python 函数中传递和使用动态参数