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 ...
随机推荐
- Codeforces 814C - An impassioned circulation of affection
原题链接:http://codeforces.com/contest/814/problem/C 题意:有长度为n的一个字符串,q个询问,每个询问由数字m和字符c组成,问最多在字符串中替换m个字符,使 ...
- 【SPOJ8222】Substrings （后缀自动机）
题意: 给一个字符串S,令F(x)表示S的所有长度为x的子串中,出现次数的最大值. 求F(1)..F(Length(S)) Length(S) <= 250000 思路:板子中st[x]定义为r ...
- 关于12306Bypass-分流抢票
12306Bypass-分流抢票-2013-15年 官网:http://www.12306bypass.com 分流抢票是一款完全免费的抢票软件,请抵制淘宝贩卖等诈骗行为 作者不会授 ...
- Houdini学习笔记——【一】散落苹果
[案例一]散落的苹果 0.渲染 1.sop使用 - 苹果主体:curve绘制刨面曲线,revolve车削得到苹果主体,uvtexture来调整uv,convert继续转换为polygon,fuse缝合 ...
- 高并发大流量专题---5、CDN加速
高并发大流量专题---5.CDN加速 一.总结 一句话总结: CDN就是多整几台节点服务器,选距离用户最近的服务器来给用户服务,实现的话可以用阿里云.腾讯云他们提供的功能,简单方便,妈妈再也不用担心我 ...
- 同源策略和跨域资源共享（CROS）
同源策略 Same-origin policy - Web security | MDN 跨站资源共享 Cross-Origin Resource Sharing (CORS) - HTTP | MD ...
- 测开之路二十：比较v1和v2
根据V1和V2的版本号,如果v1>v2,返回1,如果v1<v2,返回-1,除此之外返回0 # 如果v1>v2,返回1,如果v1<v2,返回-1,除此之外返回0v1 = inpu ...
- 安装Elasticsearch5.4.0以及head,kibana插件
可以在网盘中下载也可以去官网下载 网盘: Elasticsearch 地址:http://pan.baidu.com/s/1hrI0AFU elasticsearch-head 地址:http:// ...
- HTML页面隐藏值
<input id="menuId" type="hidden" hidden="hidden" />
- js中Object.defineProperty()方法的解释
菜菜: “老大,那个, Object.defineProperty 是什么鬼?” 假设我们有个对象 user ; 我们要给它增加一个属性 name , 我们会这么做 1 2 3 var user = ...