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 ...
随机推荐
- vue使用中的问题总结
1.根实例问题 vue中的根实例可以有多个,每个根实例可以挂载DOM元素,只有在挂载的DOM元素上才可以使用该实例中的数据方法等. 并且,组件只有在某一个根实例所挂载的DOM元素上才可以使用. 2.组 ...
- HDU 6055 Regular polygon —— 2017 Multi-University Training 2
Regular polygon Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)T ...
- LintCode之合并排序数组
题目描述: 我的代码: public class Solution { /* * @param A: sorted integer array A * @param B: sorted integer ...
- IIS的站点配置存储在applicationHost.config
C:\Windows\System32\inetsrv\Config\applicationHost.config
- git修改commiter date
GIT: change commit date to author date git filter-branch --env-filter 'export GIT_COMMITTER_DATE=&qu ...
- Charles重发请求
1.如下图 2.选中某个接口,右键--选择 Repeat Advanced选项,设置请求多次 3.
- CF561做题
C题: 一期思路:我们发现如果x,y满足条件,那么{x,-y} {-x,y} {-x,-y}也满足条件.那么我们可以只讨论|x| |y|是否满足条件,如果满足条件,那么对ans的贡献是|x|出现次数* ...
- python使用消息队列RabbitMq（进阶）
import pika connection = pika.BlockingConnection(pika.ConnectionParameters( 'localhost')) channel = ...
- java虚拟机规范(se8)——class文件格式(一)
第四章 class文件格式 本章介绍了java虚拟机的class文件格式.每一个class文件包含一个单独的类或者接口的定义.虽然类和接口不一定都定义在文件中(比如类和接口亦可以通过类加载器直接生成) ...
- 同事遇到了一个问题（在DllMain函数之前抢控制权）
同事有个需求,他的进程会加载一个DLL,他需要在那个DLL的DllMain函数执行之前控制DLL,修改DLL的内存. 以上工作要求全部在应用层执行. 这个其实有点悲剧. 因为这个需求其实有点坑,因为需 ...