jquery实现简单的搜索功能
管理系统中需要实现导航列表的搜索功能，写了一个简单的小栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div class="search">
<!-- autocomplete="off" 可以关闭搜索的记忆功能-->
<input type="text" class="input" placeholder="输入关键字" autocomplete="off">
<input type="button" value="搜索" class="btn">
<ul>
<li>商品管理</li>
<li>商品类目</li>
<li>分类列表</li>
<li>商品标签</li>
<li>回收站</li>
</ul>
<ul>
<li>销售管理</li>
<li>订单中心</li>
<li>订单提成</li>
<li>批量打印</li>
<li>订单设置</li>
</ul>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
$('.search .btn').click(function() {
var val = $('.input').val();
if ($.trim(val)!="") {
$('.search ul li').removeClass('active').filter(":contains('"+ val +"');").addClass('active');
} else{
$('.search ul li').removeClass('active');
};
});
//设置回车键搜索
$('body').keydown(function(event) {
if (event.keyCode == "13") {
$('.search .btn').click();
};
});
})
</script>
</body>
</html>
关于搜索结果的样式可以自定义
jquery实现简单的搜索功能的更多相关文章
- jQuery实现简单前端搜索功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 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=$( ...
- jquery实现表格的搜索功能
版权声明:作者原创,转载请注明出处! HTML代码如下: <input type="text" id="txt" value="" / ...
- Jquery实现简单到计时功能(setTimeout,setInterval)
要实现一个标签或者按钮进行5秒到计时,非常简单,直接上代码: 倒计时:<span id="timeSpan1" style="color:red;font-size ...
- Javascript之简单按钮搜索功能
学习JavaScript我觉得真实的感觉就是可以任意设计,“没有做不到只有想不到!”即使简单,但是任何东西的复杂都是从简单.基础开始的!这是我自己做的一个超简单的"搜索引擎"按钮, ...
- jquery实现页面的搜索功能
$(function(){ $("input[type=button]").click(function(){ var txt=$("input[type=text]&q ...
随机推荐
- node连接mysql数据库
1. 创建项目,安装mysql 创建项目文件夹test, 在test文件夹下yarn add mysql --save安装mysql: 2. node使用mysql 在test文件夹下,创建test. ...
- Oracle or Question Solve(二)
数据库常用语句和函数 ----update update()函数主要注意的是后面的where限制条件--例子:update tab_a a set a.v1 = (select b.v1 from t ...
- linux设备驱动第二篇：构造和运行模块
上一篇介绍了Linux驱动的概念,以及linux下设备驱动的基本分类情况及其各个分类的依据和差异,这一篇我们来描述如何写一个类似hello world的简单测试驱动程序.而这个驱动的唯一功能就是输 ...
- 【GDAL】聊聊GDAL的数据模型
GDAL是个非常优秀的GIS数据操作库,最近在和实习生介绍GDAL的简单使用,顺手写下记录 本篇记录栅格数据,代码环境为C# 在GDAL中,栅格数据大致是以一个Dataset对应一个栅格数据文件(.T ...
- Python笔记(六)_函数
函数一般是从第一行代码开始执行,结束于return语句.异常.或者函数所有语句执行完毕.一旦函数将控制权交还给调用者,就意味着全部结束.函数中做的所有工作以及保存在局部变量中的数据都将丢失.再次调用这 ...
- shell ssh和mount 挂载问题
任务: 将服务器端数据挂载在板子上 1. 首先ssh问题 spawn ssh $remote_user@$remote_host (1) ssh:connect to host 10.110.6.50 ...
- oracle执行计划（转载）
转载自 https://www.cnblogs.com/Dreamer-1/p/6076440.html 一:什么是Oracle执行计划? 执行计划是一条查询语句在Oracle中的执行过程或访问路径的 ...
- python-javascript之bom
BOM BOM介绍 全称 Browser Object Mode 浏览器对象模式 操作浏览器的API接口.比如浏览器自动滚动 Windows对象的顶层部分是BOM的顶层(核心)对象,所有的对象都是通过 ...
- 转 awk统计nginx每天访问最高的接口
TODAY=date +%d/%b/%Y 获取当天时间awk -v val="$TODAY" ’ $4 ~ val {print $7}’ access.log 打印当天访问的接口 ...
- HDU 3571 N-dimensional Sphere( 高斯消元+ 同余 )
N-dimensional Sphere Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Oth ...