自动提示 版本1.1中由于发送的是同步请求，经fiddler低网速测试，发现在查询数据返回之前，浏览器会卡死，体验很不好，昨晚修改了下，改为发送异步请求，不会出现卡死的情况了。
JavaScript代码
/*
* author: realwall
* email: realwall@126.com
*/
(function(window){
var autoClue = {
clue : function(getContentUrl, txt, clue, txtInitValue, txtEnterAction){
/*
* getContentUrl 提示数据的请求地址
* txt 文本框dom对象
* clue ul无序列表dom对象
* txtInitValue 文本框初始化文本
* txtEnterAction 用户输入完成，按enter键后触发的函数
*/
var isInit = false;
clue.style.display = "none";
var cluestr = clue.id;
var createList = function(data){
var i, str='', len = data.length;
for(i = 0; i < len && i < 10; i++){
str += '<li id="list'
+ cluestr
+ i
+'">'
+ decodeURIComponent(data.pop());
+'</li>';
}
return str;
};
if(!isInit){
txt.value = txtInitValue;
}
txt.onfocus = function(){
if(!isInit || txt.value == txtInitValue){
txt.value = "";
}
};
txt.onblur = function(){
if(txt.value == ''){
txt.value = txtInitValue;
}
};
txt.onkeyup = function(event){
event = event || window.event;
var input = encodeURIComponent(txt.value);
var result = new Array();
var i, len = input.length, resultLen;
if(input == null || input == ''){
isInit = true;
return false;
}
if(event.keyCode == 40 && clue.innerHTML){
var listLen = clue.children.length, i, curIndex = -1;
for(i = 0; i < listLen; i++){
var tmp = clue.childNodes[i].style.backgroundColor;
if(tmp != "" && tmp != null && tmp != "none"){
curIndex = i;
var curList = document.getElementById("list" + cluestr + i);
if(navigator.appName =="Microsoft Internet Explorer"){
curList.style.backgroundColor = "";
}else{
curList.style.backgroundColor = null;
}
if(i == listLen-1){
curIndex = -1;
}
break;
};
}
var nextList = document.getElementById("list"+cluestr+(curIndex+1));
nextList.style.backgroundColor = "#D1E5FC";
txt.value = nextList.innerHTML;
txt.focus();
return false;
}
if(event.keyCode == 38 && clue.innerHTML){
var listLen = clue.children.length, i, curIndex = 0;
for(i = 0; i < listLen; i++){
var tmp = clue.childNodes[i].style.backgroundColor;
if(tmp != "" && tmp != null && tmp != "none"){
curIndex = i;
var curList = document.getElementById("list" + cluestr + i);
if(navigator.appName =="Microsoft Internet Explorer"){
curList.style.backgroundColor = "";
}else{
curList.style.backgroundColor = null;
}
if(i == listLen-1){
curIndex = -1;
}
break;
};
}
var preList=document.getElementById("list"+cluestr+((curIndex-1+listLen)%listLen));
preList.style.backgroundColor = "#D1E5FC";
txt.value = preList.innerHTML;
txt.focus();
return false;
}
if(event.keyCode == 13 && clue.innerHTML){
var listLen = clue.children.length, i, curIndex = -1, submitFlag = true;
for(i = 0; i < listLen; i++){
var tmp = clue.childNodes[i].style.backgroundColor;
if(tmp != "" && tmp != null && tmp != "none"){
submitFlag = false;
curIndex = i;
var curList = document.getElementById("list" + cluestr + i);
txt.value = curList.innerHTML;
clue.innerHTML = "";
clue.style.display = "none";
break;
};
}
if(submitFlag){
txtEnterAction();
}
return false;
}
if(event.keyCode == 13 && clue.innerHTML == ''){
txtEnterAction();
return false;
}
if(txt.value != ''){
$.post(getContentUrl,{'input':txt.value},function(data){
if(data == null){//data格式：[{name:'realwall'},{name:'可以是中文'}]
clue.style.display = "none";
return;
}
var i, len = data.length, content = [];
for(i = 0; i < len; i++){
content.push(encodeURIComponent(data[i].name));
}
var ilen = input.length;
for(i = 0; i < content.length; i++){
if(input == content[i].substring(0, ilen)){
result.push(content[i]);
}
}
resultLen = result.length;
resultStr = createList(result);
clue.innerHTML = resultStr;
clue.style.display = "block";
for(i = 0; i < resultLen && i < 10; i++){
var list = document.getElementById("list" + cluestr + i);
list.onclick = function(){
txt.value = this.innerHTML;
clue.style.display = "none";
};
}
}, 'json');
}
};
document.body.onclick = function(){
if(clue.style.display != "none"){
clue.style.display = "none";
}
};
}
};
window.autoClue = autoClue;
})(window);
HTML代码
<div id="inputclue">
<input type="text" id="txt" class="">
<ul id="clue" style="display: none;">
</ul>
</div>
调用autoComplete的js代码
var clue = document.getElementById("clue");
var search = document.getElementById("txt");
autoClue.clue('getDataUrl', search, clue, "请输入", function(){searchQuery();});
function searchQuery(){
var query = encodeURIComponent(search.value);
if(query != ''){
window.location.href = 'result_list.html?query=' + query;
}
}