Question

怎样用Ajax实现网站输入框的自动提示功能

Answer 1

1、静态数据的自动提示，示例代码，仅供参考
jQuery(document).ready(function(){
var data = [{uid:'语文', pwd:'yuwen'}, {uid:'英语', pwd:'yingyu'}, {uid:'数学', pwd:'shuxue'}];

jQuery("#city").autocomplete(data, {
minChars: 0,
max: 10,
width: 200,
matchContains: true,
formatItem: function(row, i, max){//格式化列表中的条目
return row.uid + "_" + row.pwd;
},
formatMatch: function(row, i, max){//匹配的值
return row.uid + " " + row.pwd;
},
formatResult: function(row){//选择后文本框显示的值
return row.uid+"dd";
}
}).result(function(event, row, formatted){
alert(formatted); //选择后触发的事件
});
});
function _click(){
alert(jQuery("#city").val());
}
<input type="text" id="city"><input type="button" value="click" onclick="_click();">

2、动态数据的范例代码
jQuery(document).ready(function(){
jQuery("#city").autocomplete("autoData", { //使用远程地址获取数据
minChars: 0,
max: 10,
width: 200,
matchContains: true,
extraParams: { //city是url的传递参数
city: function(){
return jQuery("#city").val();
}
},
formatItem: function(row, i, max){//格式化列表中的条目
row = eval("("+row+")");
return row.uid + "_" + row.pwd;
},
formatMatch: function(row, i, max){//匹配的值
row = eval("("+row+")");
return row.uid + " " + row.pwd;
},
formatResult: function(row){//选择后文本框显示的值
row = eval("("+row+")");
return row.uid;
}
}).result(function(event, row, formatted){
row = eval("("+row+")");
alert(row.uid);
});
});
function _click(){
alert(jQuery("#city").val());
}

　　

Answer 2

我猜测你是想实现自动补全效果吧。比如你输入一个“百”字，立马就能提示出类似”百度“的效果对吧。
使用jquery的autocomplete插件，详细的代码可以在百度上搜索这个插件的用法。

Answer 3

如果是在输入框中用输入框的事件即可onfocus=""，如果有必要请求数据才要用Ajax