基于jquery的仿百度搜索框效果代码

先看看整个的效果图:
图一:

图二:

图三:

图四:

大概的效果图就这样,接下来直接看源码
页面:

<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<%if (false){ %>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<%} %>
<script src="jquery.autoSearchText.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#autoSearchText').autoSearchText({ width: 300, itemHeight: 150,minChar:1, datafn: getData, fn: alertMsg });
});
function alertMsg(vl){
alert('你将要搜索的关键字是: '+vl);
}
/*加载数据*/
function getData(val) {
var arrData = new Array();
if (val != "") {
$.ajax({
type: "post",
async: false, //控制同步
url: "getData.ashx",
data: "param=" + val,
dataType: "json",
cache: false,
success: function(data) {
for (var i = 0; i < data.length; i++) {
if (val == data[i].Code.substring(0, val.length))
arrData.push(data[i].Code);
}
},
Error: function(err) {
alert(err);
}
});
}
return arrData;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="autoSearchText" type="text" value="请输入编码" enableviewstate="false"/>
<br />
<input id="Text1" type="text" style=" display:none;"/>
</div>
</form>
</body>
</html>

CSS:

JS:
Demo下载

您可能感兴趣的文章:
  • 基于jQuery实现搜索关键字自动匹配功能
  • jquery插件实现搜索历史

转载请注明出处:http://www.heshunyou.com/article/20230526/106650.html