jQuery实现简单前端搜索功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>工程轻量化与可靠性技术实验室</title>
</head>
<body>
<div class="content-right">
<input type="text"><input type="submit" value="搜索">
<h3>应用流体学</h3>
<ul id="content_news_list">
<li><span>--</span><a href="">这里是文章的标题1</a></li>
<li><span>--</span><a href="">这里是文章的标题2</a></li>
<li><span>--</span><a href="">这里是文章的标题3</a></li>
<li><span>--</span><a href="">这里是文章的标题4</a></li>
<li><span>--</span><a href="">这里是文章的标题5</a></li>
<li><span>--</span><a href="">这里是文章的标题6</a></li>
<li><span>--</span><a href="">这里是文章的标题6</a></li>
<li><span>--</span><a href="">这里是文章的标题6</a></li>
<li><span>--</span><a href="">这里是文章的标题6</a></li>
<li><span>--</span><a href="">这里是文章的标题4</a></li>
</ul>
</div>
</body>
<script type="text/javascript">
$(function(){ $("input[type=text]").change(function () {
var searchText = $(this).val();//获取输入的搜索内容
var $searchLi = "";//预备对象，用于存储匹配出的li if (searchText != "") { //获取所有匹配的li
$searchLi = $("#content_news_list").find('a:contains('+ searchText +')').parent();
//将内容清空
$("#content_news_list").html("");
} //将获取的元素追加到列表中
$("#content_news_list").html($searchLi).clone(); //判断搜索内容是否有效，若无效，输出not find
if ($searchLi.length <= ) {
$("#content_news_list").html("<li>not find</li>")
}
}) $("input[type=submit]").click(function () {
$("searchText").change();
})
})
</script>
jQuery实现简单前端搜索功能
jQuery实现简单前端搜索功能的更多相关文章
- jquery实现简单的搜索功能
管理系统中需要实现导航列表的搜索功能,写了一个简单的小栗子: <!DOCTYPE html> <html lang="en"> <head> & ...
- js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- jquery一句话实现快速搜索功能
jquery一句话实现快速搜索功能 //快捷搜索公共方法,其中obj为显示行的子节点function filter(obj, filterNameValue){ $(obj).hide().filte ...
- jquery实现简单的搜索
对一个简单的ul列表进行输入框的搜索功能,搜索之前及搜索后显示效果如下: 用到的主要jquery技术有filter()和match()方法以及正则匹配,基础HTML+div设置: <div cl ...
- 利用jquery的contains实现搜索功能
/ jquery实现的搜索功能 $('#search_btn').on('click',function(){ var txt=$('#inputValue').val(); var value=$( ...
- html中layui+jfinal模板实现前端搜索功能
<input type="text" id="campus" class="layui-input" onkeyup="ck ...
- jquery实现表格的搜索功能
版权声明:作者原创,转载请注明出处! HTML代码如下: <input type="text" id="txt" value="" / ...
- Jquery实现简单到计时功能(setTimeout,setInterval)
要实现一个标签或者按钮进行5秒到计时,非常简单,直接上代码: 倒计时:<span id="timeSpan1" style="color:red;font-size ...
- Javascript之简单按钮搜索功能
学习JavaScript我觉得真实的感觉就是可以任意设计,“没有做不到只有想不到!”即使简单,但是任何东西的复杂都是从简单.基础开始的!这是我自己做的一个超简单的"搜索引擎"按钮, ...
随机推荐
- (转）ActiveMQ的重连机制
花了一天的时间,终于搞明白了我的疑问. failover://(tcp://localhost:6168)?randomize=false&initialReconnectDelay=100& ...
- 手机uc不支持伪元素使用animation动画；移动端background-attachment:fixed不兼容性
20170503 1.手机uc不支持伪元素使用animation动画 (暂未解决) 2.移动端background-attachment:fixed不兼容性,没有任何效果, element:befor ...
- py下载网络图片
很简单,做下记录 import urllib import os url = "图片路径" dir = "d:\\pyimgtest\\G0000001\\" ...
- Mybatis 映射关系
相比 Hibernate,Mybatis 的映射关系就显得简单了很多. 未完待续....
- UVA11737_Extreme Primitive Society
这是隐藏的最深的一个水题.其隐藏性能如此之好,是因为题目的描述十分蛋疼,写了好多好多的废话. 让我们这种过不了六级的孩子情何以堪啊. 是这样的,给你若干个矩形,每次在所有的矩形中两两组合形成许多许多新 ...
- 【Java并发编程】之三：线程挂起、恢复与终止的正确方法
挂起和恢复线程 Thread 的API中包含两个被淘汰的方法,它们用于临时挂起和重启某个线程,这些方法已经被淘汰,因为它们是不安全的,不稳定的.如果在不合适的时候挂起线程(比如,锁定共享资源时), ...
- CF521D Shop 贪心
题意: \(n\)个数,有\(m\)个操作,形如: 1,将\(x_i\)改成\(val_i\) 2,将\(x_i\)加上\(val_i\) 3,将\(x_i\)乘上\(val_i\) 其中第\ ...
- mysql主从复制 master和slave配置的参数大全
master所有参数1 log-bin=mysql-bin 1.控制master的是否开启binlog记录功能: 2.二进制文件最好放在单独的目录下,这不但方便优化.更方便维护. 3.重新命名二进制日 ...
- LibreOJ #539. 「LibreOJ NOIP Round #1」旅游路线（倍增+二分）
哎一开始看错题了啊T T...最近状态一直不对...最近很多傻逼题都不会写了T T 考虑距离较大肯定不能塞进状态...钱数<=n^2能够承受, 油量再塞就不行了...显然可以预处理出点i到j走c ...
- bzoj3143: [Hnoi2013]游走（贪心+高斯消元）
考虑让总期望最小,那么就是期望经过次数越多的边贪心地给它越小的编号. 怎么求每条边的期望经过次数呢?边不大好算,我们考虑计算每个点的期望经过次数f[x],那么一条边的期望经过次数就是f[x]/d[x] ...