jquery仿搜索自动联想功能代码


Posted in Javascript onMay 23, 2014
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<style type="text/css"> 
body{margin:0px;padding:0px;} 
ul{margin:px;padding:0px;list-style-type:none;} 
</style> 
<script src="jquery-1.8/jquery-1.8.0.js"></script> 
<script> 
$(function(){ 
a(); 
onclick(); 
$("#txt").bind("keyup",function(){ 
txtchange(0); 
}); }); 
function a(){ 
ularray=[]; 
var data=[{1:11},{1:12},{1:22},{1:33},{1:123}]; 
//给ul传入数据 
var ul=$("#ul1"); 
$.each(data,function(index,item) 
{ 
var li=$("<li></li>"); 
$.each(item,function(name,value) 
{ 
var span=$("<span></span>").html(value); 
li.append(span); 
ularray.push(value); 
}); 
ul.append(li); 
}); 
//排序 
ularray.sort(); 
}; 
//keyup事件 
function txtchange(flag) 
{ 
var textObj=$("#txt").val(); 
var divObj=$("#div1").html(); 
var array=[]; 
with(divObj) 
{ 
var ulHTML=divObj.match(/<[^>]*>/)[0];//拿到开始标签 
val = ularray+ ""; //转为字符串 
for(var i=0;i<ularray.length;i++) 
{ 
if(val.split(",")[i].indexOf(textObj)!==-1||flag) //分割成字符串数组 
{ 
array[array.length]="<li><span>"+ularray[i]+"</span></li>"; 
}; 
};//把新得到的集合放入数组 
var liHtml = ""; 
$.each(array,function(item,val){ 
liHtml += val; 
});//去掉数组间逗号 
divObj=ulHTML+liHtml+"</ul>"; 
$("#ul1").html(divObj); 
onclick(); //让新得到的数组拥有点击功能 
}; 
}; 
//span单击事件 
function onclick(){ 
$("#ul1 li span").click(function() 
{ 
var oli=$(this); 
var otxt=$(this).html(); 
$("#txt").empty().val(otxt); 
}); 
}; 
</script> 
</head> 
<body > 
<center> 
<form> 
<input id="txt" type="text" /> 
自动提示 
<div id="div1"> 
<ul id="ul1" > 
</ul> 
</div> 
</form> 
</center> 
</body> 
</html>
Javascript 相关文章推荐
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
js实现简单页面全屏
Sep 17 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 #Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 #Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 #Javascript
jquery 中的each()跳出循环的语句
May 23 #Javascript
Jquery给基本控件的取值、赋值示例
May 23 #Javascript
js动态修改整个页面样式达到换肤效果
May 23 #Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 #Javascript
You might like
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
php session的锁和并发
2016/01/22 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
Python itertools模块详解
2015/05/09 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
python适合人工智能的理由和优势
2019/06/28 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
运动会稿件100字
2014/02/21 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
经理任命书模板
2014/06/06 职场文书
创先争优活动心得体会
2014/09/04 职场文书
场地使用证明模板
2014/10/25 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电