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 相关文章推荐
javascript编写实用的省市选择器
Feb 12 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
详解VUE中v-bind的基本用法
Jul 13 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 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
多重?l件?合查?(一)
2006/10/09 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
Python模块包中__init__.py文件功能分析
2016/06/14 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
python实现可变变量名方法详解
2019/07/01 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
数控专业毕业生自荐信范文
2014/03/04 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
重点工程汇报材料
2014/08/27 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
十八大观后感
2015/06/12 职场文书
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技