body { background-color:#f5f5f5; } .warp { width:50%; margin:0 auto; } /*清除input默认样式*/ input { border:0; background-color:transparent; } /*搜索栏*/ .search_box { width:60%; height:32px; box-sizing:border-box; box-shadow:1px 1px 4px #e2e2e2; padding:0 10px; border:1px solid #e2e2e2; border-radius:4px; background-color:#f5f5f5; margin:50px auto 20px auto; } .search_box input { width:80%; height:30px; line-height:30px; font-size:15px; color:#8c8282; } .search_box .search_icon { float:right; display:inline-block; width:24px; height:24px; background:url("img/search.png") no-repeat center center; background-size:cover; margin-top:3px; } /*搜索内容*/ .search_content { width:60%; margin:0 auto; background-color:#fff; border-radius:8px; } .search_content ul { padding-left:0; } .search_content li { width:90%; margin:0 auto; height:40px; line-height:40px; box-sizing:border-box; border-bottom:.4px solid #e2e2e2; list-style:none; } .search_content li:last-child { border-bottom:0; } .search_content li a { color:#8c8282; }
思想: 当触发 keyup 键盘松开事件时,判断 input 输入框中的内容是不是 li 标签里包含的内容,包含则该 li 标签显示,不包含 则该 li 标签隐藏。
步骤:
1.使用 keyup 键盘松开事件,当键盘松开时触发以下内容。
2. 先获取 input 输入框中的内容。
3. 利用 jQuery 中 :contains 选择器判断 li 标签中的内容是否包含 input 输入框中的内容。
4.如果包含则该 li 标签显示,否则 则隐藏。