jquery仿搜索自动联想功能代码_Javascript教程-查字典教程网
jquery仿搜索自动联想功能代码
jquery仿搜索自动联想功能代码
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:Inserttitleherebody{margin:0px;padding:0px;}ul{margin:px;padd...

复制代码 代码如下:

<!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教程学习
    编程开发子分类