求搜索框输入拼音显示相关文字提示原理（有源码实例更好）

Question

在input输入框中输入拼音“s”，在数据库中存在的已有文字信息的前缀就与之匹配，弹出一个像baidu首页（其实就是它那首页的那种功能··只不过需要显示的是自己数据中相关字段的信息）那种效果的下拉框把相关的汉字信息列出来供用户选择。可以用箭头上下选择，也可以用鼠标选择。静候中~~~~

Answer 1

原理是当用户输入时，触发修改事件，用Ajax提交给后台数据库查询，然后再返回到页面输入框中。
几个关键点：
1) 输入框的onChange事件，获取输入值
2) 用xmlhttp异步方式提交给后台php程序
3) php处理数据库查询
4) php程序返回结果给页面
5) xmlhttp的返回处理函数更新输入框下面的悬浮下拉框但是具体实现需要花点时间。

Answer 2

同意樓上的，應該用的是AJAX吧

Answer 3

现成的东西jquery.autocomplete<script type="text/javascript" src="js/jquery.js"></script>
<script type='text/javascript' src='js/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='js/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" />
<script language="javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
$(".autocomplete").autocomplete("$basename&cjob=searchxck", {
minChars: 2,
dataType: "json",
width: 450,
scrollHeight: 180,
max: 50,
selectFirst: false,
matchContains: "word",
autoFill: false,
formatItem: function(row, i, max) {
return i + "/" + max + ": [" + row['number'] + "] " + row['name'] + "";
},
parse: function(data){
var parsed = [];
var rows = data;
for (var i=0; i < rows.length; i++) {
var row = rows[i];
if (row) {
parsed[parsed.length] = {
data: row,
value: row['name'],
result: row['name']
};
}
}
return parsed;
},
});
$(".autocomplete").result(function(event, data, formatted) {
if(data){
var id=$(this).attr("id");
id=id.replace("name","content");
$("#"+id).val(data['content']);
}
});
});
</script>