php搜索自动联想,JavaScript_jquery仿搜索自动联想功能代码，复制代码 代码如下: <!DOCTYPE - phpStudy...

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

Insert title here

body{margin:0px;padding:0px;}

ul{margin:px;padding:0px;list-style-type:none;}

$(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=$("

");

$.each(item,function(name,value)

{

var 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

{

if(val.split(",")[i].indexOf(textObj)!==-1||flag) //分割成字符串数组

{

array[array.length]="

"+ularray[i]+"";

};

};//把新得到的集合放入数组

var liHtml = "";

$.each(array,function(item,val){

liHtml += val;

});//去掉数组间逗号

divObj=ulHTML+liHtml+"";

$("#ul1").html(divObj);

onclick(); //让新得到的数组拥有点击功能

};

};

//span单击事件

function onclick(){

$("#ul1 li span").click(function()

{

var oli=$(this);

var otxt=$(this).html();

$("#txt").empty().val(otxt);

});

};

自动提示

相关阅读:

Android百度地图应用之MapFragment的使用

javascript中为某个元素指定事件的三种方式

PHP中使用CURL获取页面title例子

js查找节点的方法小结

Java基础之java处理ip的工具类

JS模拟按钮点击功能的方法

Win7系统3d桌面如何设置？Win7系统实现3d桌面的方法

举例讲解Android中ViewPager中的PagerTitleStrip子控件

js实现同一个页面多个渐变效果的方法

关于javascript中限定时间内防止按钮重复点击的思路详解

Swift中的条件判断、循环、跳转语句基础学习笔记

C# 常用公共方法

asp.net导出Excel乱码的原因及解决方法

JS简单的图片放大缩小的两种方法