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我觉得真实的感觉就是可以任意设计,“没有做不到只有想不到!”即使简单,但是任何东西的复杂都是从简单.基础开始的!这是我自己做的一个超简单的"搜索引擎"按钮, ...
随机推荐
- Ubuntu 16.04出现：Problem executing scripts APT::Update::Post-Invoke-Success 'if /usr/bin/test -w /var/
转自:http://blog.csdn.net/zzq123686/article/details/77454066 出现错误信息: Reading package lists... Done E: ...
- SSH管理(重启 停止 运行 安装)centos7
下面整理经常用到管理SSH服务的命令,方便复制哈. SSH服务状态 systemctl status sshd.service SSH运行命令 service sshd start SSH重启命令 s ...
- 【Python】python 反射机制在实际的应用场景讲解
剖析python语言中 "反射" 机制的本质和实际应用场景一. 前言 def s1(): print("s1是这个函数的名字!") s = "s1&q ...
- 【bzoj3130】[Sdoi2013]费用流 二分+网络流最大流
题目描述 Alice和Bob做游戏,给出一张有向图表示运输网络,Alice先给Bob一种最大流方案,然后Bob在所有边上分配总和等于P的非负费用.Alice希望总费用尽量小,而Bob希望总费用尽量大. ...
- 【开发工具IDE】Eclipse 安装 Maven 的 m2eclipse 插件
本段节选自http://www.cnblogs.com/dcba1112/archive/2011/05/01/2033805.html Eclipse是一款非常优秀的IDE.除了基本的语法标亮.代码 ...
- 高rong效chang的可持久化treap
很多人觉得可持久化treap很慢,但是事实上只是他们可持久化treap的写法不对.他们一般是用split和merge实现所有功能,但是这样会有许多不必要的分裂.其实我们可以用一种特殊的方式来实现插入和 ...
- py2exe使用总结
假如你用python写了个小程序,想给别人用或者给别人演示,但他电脑里没装python.wxpython等,这时候你可以试试py2exe,它是一个将python脚本转换成windows上的可执行程序( ...
- BSGS和扩展BSGS
BSGS: 求合法的\(x\)使得\(a ^ x \quad mod \quad p = b\) 先暴力预处理出\(a^0,a^1,a^2.....a^{\sqrt{p}}\) 然后把这些都存在map ...
- 谈谈 Java 类加载机制
概述 类加载器主要分为两类,一类是 JDK 默认提供的,一类是用户自定义的. JDK 默认提供三种类加载器: Bootstrap ClassLoader 启动类加载器:每次执行 java 命令时都会使 ...
- 【数论】数论进阶-Preknowledge
数论进阶-Preknowledge 参考资料:洛谷网校2018夏季省选基础班SX-3数论进阶课程及课件 一.整除与取整除法 1.1 定义 1.整除 \(\forall~x,y~\in~Z^+,\) 若 ...