|
锁定老帖子 主题：仿google搜索提示
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-01-08
最后修改：2010-01-08
我是专做后台的，平时也弄一下 javascript 和 CSS ，之前在公司用 DWR 和 JS 做了一个类似 google 的搜索提示。现在把 DWR 去掉，用静态的 JSON 数据代替，为的就是脱离后台，可以静态看到效果。现在只整理了一部分，还不支持键盘事件。如果有时间我会把剩下的功能也整理出来。
如果写得不好，大家请指教。 在 IE6 FireFox Chrome 下都可以 先看下 html 代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>Auto Complete</title> <script type="text/javascript" src="autoComplete.js"></script> <link rel="stylesheet" type="text/css" href="autoComplete.css"></link> </head> <body> <div>请输入a,b或其它字符看效果。</div> <div> <input name="summary" id="summary" class="text medium" onkeyup="Auto.autoGet(this.value);" onblur="Assist.autoClose();" autocomplete="off" /><input type="button" value="搜索"> </div> <div> <ul id="autoUl"></ul> </div> </body> </html> 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-01-08
最后修改：2010-01-08
/**
* @author <a href="mailto:toozwd@gmail.com">张文弟</a>
* 模仿google搜索的自动完成
* 用最精简的代码实现最强大的功能
*/
//instead document.getElementById()
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
//instead document.getElementById().value
var $F = function (id) {
return $(id).value;
};
var Auto = {
autoGet : function(value) {
if(value == '') {
this.closePop();
} else {
// get the return value list from json
var jsonValue = getListJson(value).summary;
this.autoCallback(jsonValue);
}
},
autoCallback : function(list) {
//remove the old pop li
this.closePop();
if (list.length > 0) {
for(var i = 0;i < list.length; i++){
$("autoUl").className = 'autoUl';
var autoLi = document.createElement("li");
// onmouseout event
autoLi.onmouseout = function() {
this.className = 'mouseOut';
Assist.isOnmouseover = false;
}
// onmouseover event
autoLi.onmouseover = function() {
this.className = 'mouseOver';
Assist.isOnmouseover = true;
}
// onclick event
autoLi.onclick = function() {
Assist.autoPush(this);
}
liValue = '<div class="resultName">' + list[i].name + '</div>';
liValue += '<div class="resultTimes">' + list[i].times + ' 结果</div>';
autoLi.innerHTML = liValue;
$("autoUl").appendChild(autoLi);
}
//pop the li
var closeLi = document.createElement("li");
closeLi.style.textAlign = "right";
closeLi.innerHTML = '<a href="javascript:void(0);" onclick="Auto.closePop();">关闭</a>';
$("autoUl").appendChild(closeLi);
}
},
closePop : function() {
var ul = $("autoUl").childNodes.length;
for(var i = ul - 1; i >= 0 ; i--) {
$("autoUl").removeChild($("autoUl").childNodes[i]);
}
$("autoUl").className = "borderNull";
}
}
var Assist = {
isOnmouseover : false,
// close the auto complete message when onclick the page of the body(input lose focus)
autoClose : function() {
if(this.isOnmouseover == false) {
Auto.closePop();
}
},
autoPush : function(obj) {
$("summary").value = obj.childNodes[0].firstChild.nodeValue;
Auto.closePop();
//document.forms[0].submit();
}
}
// the json test data
function getListJson(name) {
if(name == 'a') {
var summaryJson = {"summary": [
{"name": "auto", "times": "13"},
{"name": "ajax", "times": "15"},
{"name": "abacus", "times": "33"}
]
};
return summaryJson;
} else if(name == 'b') {
var summaryJson = {"summary": [
{"name": "blue", "times": "18"},
{"name": "blind", "times": "24"},
{"name": "because", "times": "384"}
]
};
return summaryJson;
} else {
var summaryJson = {"summary": [
{"name": "didn't input", "times": "31"},
{"name": "the 'a' or 'b'", "times": "39"},
{"name": "display the ", "times": "44"},
{"name": "defult value", "times": "129"}
]
};
return summaryJson;
}
}
|
| 返回顶楼 | |
|
发表时间：2010-01-08
最后修改：2010-01-08
input {
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
background: #ffffff;
}
ul li {
line-height: 1.5em;
margin: 0;
padding: 0;
width: 302px;
background: #ffffff;
cursor: default;
font-size: 12px;
height: 20px;
}
.autoUl {
margin-top: -2px;
padding: 0;
width: 302px;
border: 1px solid #111111;
position: absolute;
background: #ffffff;
}
.mouseOver {
color: #ffffff;
background: #6699FF;
}
.mouseOut {
color: #111111;
background: #ffffff;
}
.borderNull {
border: none;
}
.autoNone {
display: none;
}
.medium {
width: 300px;
}
.resultName {
float: left;
}
.resultTimes {
color: #008000;
text-align: right;
}
|
| 返回顶楼 | |
|
发表时间：2010-01-11
是不是应该先截个图给个效果啊
|
| 返回顶楼 | |
|
发表时间：2010-01-11
效果不错,支持.
|
| 返回顶楼 | |
|
发表时间：2010-01-11
不错，如果再加上上键盘的下方向键选择事件就更好了
|
| 返回顶楼 | |
|
发表时间：2010-01-11
键盘事件都有的``不过之前的代码有点乱，现在还没时间去整理`
|
| 返回顶楼 | |
|
发表时间：2010-01-11
这儿有个，不过是jQuery的，http://javazeke.iteye.com/blog/521390
应该比较容易上手 |
| 返回顶楼 | |
|
发表时间：2010-01-11
在项目应用中，这种提示的东西，一定是从数据库得到的动态数据。
静态数据无应用意义。 |
| 返回顶楼 | |
|
发表时间：2010-01-11
最后修改：2010-01-11
在方法autoGet里调用你的ajax方法，然后返回json格式的数据就可以了``
这里只负责前端的显示``后台你用dwr，dojo等等调用后台方法都可以``这不是本文章的重点 |
| 返回顶楼 | |
