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

前端技术 2023/09/08 JavaScript
复制代码 代码如下:

<!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>

本文地址：https://www.stayed.cn/item/22612

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案