html自动联想什么意思,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);

});

};

自动提示