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 相关文章推荐
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
Bootstrap响应式表格详解
May 23 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
菜单效果
2006/10/14 Javascript
js常见表单应用技巧
2008/01/09 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
Python读写文件方法总结
2015/06/09 Python
Python 爬虫的工具列表大全
2016/01/31 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
python实现图书管理系统
2018/03/12 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
python利用opencv实现颜色检测
2021/02/23 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
会计系毕业个人自荐信格式
2013/09/23 职场文书
大学活动策划书范文
2014/01/10 职场文书
参观邀请函范文
2015/02/02 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书