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 ...
随机推荐
- 九、async、future、packaged_task、promise
std::async.std::future创建后台任务并返回值. 希望线程返回一个值. std::async是个函数模板,用来启动一个异步任务,返回一个std::future对象 异步任务:自动创建 ...
- vue多个input绑定一个数组变量问题
对于data中声明的一个数组变量arr=[],在绑定时候可以如下: <div style="margin-top: 10px;margin-left: 40px;"> ...
- ansible控制winserver笔记
原文地址: https://www.cnblogs.com/kingleft/p/6391652.html 环境描述: ansible控制远程windows .系统必须是sp1 .安装framewor ...
- 杂项-Tmod：常见错误提示
ylbtech-杂项-Tmod:常见错误提示 1.返回顶部 1. The column 'Content' was specified multiple times for 'T'.select a. ...
- Vue-随笔小记
注:本文属个人随笔记录,如有错误请大家多多指正 1.vue.nextTick([callback,context]) 参数: {function}[context] {Object}[context] ...
- 【转】Selenium 加载Chrome/Firefox浏览器配置文件
原文地址:https://www.cnblogs.com/eastonliu/p/9083982.html Selenium启动浏览器时,默认是打开一个新用户,不会加载原有的配置以及插件.但有些时候我 ...
- exception 打印出异常栈踪迹
Java异常抛出使用e.printStackTrace(),打印出抛出的异常栈踪迹, 如果你在catch中继续抛出这个异常,那么e.printStackTrace()也能跟踪到抛出异常的地方, 使用t ...
- 【Web API]无法添加AttributeRoutes的解决方案
1.按照微软官方文档,如果要使用AttributeRoutes,需要在APP_START里的WebApiConfig.cs的Register方法中添加一行:config.MapHttpAttribut ...
- Cocos2d-x之Action
| 版权声明:本文为博主原创文章,未经博主允许不得转载. 在Cocos2d-x中的Node对象可以有动作,特效和动画等动态特性.因此在Node类中定义了这些动态特性,因此精灵,标签,菜单,地图和粒 ...
- ThreadLocal相关
转自:http://blog.csdn.net/lufeng20/article/details/24314381 ThreadLocal是什么 早在JDK 1.2的版本中就提供Java.lang.T ...