最近客户需求老是变更,不过有些是因为客户催得急,我没有那么快能完成,所以先做了一个雏形给他们,后来再慢慢改。比如雏形那里我做了一个下拉列表给他们,事实上他们的数据有200多条,用个下拉列表的话很不现实,你能找那么多?而且那个下拉列表该有多长啊?所以很自然的,我想到了百度那个智能提示的功能。
参考了一下之前忘记是哪位大侠写的东西,他的是使用百度api的,为了简单起见,我把数据都定在了js那里,这样看官们容易理解一些。
还是整个代码考上来吧,代码不长。考了一下之前忘记是哪位大侠写的东西,他的是使用百度api的,为了简单起见,我把数据都定在了js那里,这样看官们容易理解一些。
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.search
{
left: 0;
position: relative;
}
#auto_div
{
display: none;
width: 300px;
border: 1px #74c0f9 solid;
background: #FFF;
position: absolute;
top: 24px;
left: 0;
color: #323232;
}
</style>
<script src="https://www.jb51.net/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//测试用的数据
var test_list = ["小张", "小苏", "小杨", "老张", "老苏", "老杨", "老爷爷", "小妹妹", "老奶奶", "大鹏", "大明", "大鹏展翅", "你好", "hello", "hi"];
var old_value = "";
var highlightindex = -1; //高亮
//自动完成
function AutoComplete(auto, search, mylist) {
if ($("#" + search).val() != old_value || old_value == "") {
var autoNode = $("#" + auto); //缓存对象(弹出框)
var carlist = new Array();
var n = 0;
old_value = $("#" + search).val();
for (i in mylist) {
if (mylist[i].indexOf(old_value) >= 0) {
carlist[n++] = mylist[i];
}
}
if (carlist.length == 0) {
autoNode.hide();
return;
}
autoNode.empty(); //清空上次的记录
for (i in carlist) {
var wordNode = carlist[i]; //弹出框里的每一条内容