使用autocomplete实现google下拉框

1. 在页面引入js和css
<script type="text/javascript" src="jquery.js"></script>

<script type='text/javascript' src='jquery.bgiframe.min.js'></script>

<script type='text/javascript' src='jquery.ajaxQueue.js'></script>

<script type='text/javascript' src='thickbox-compressed.js'></script>

<script type='text/javascript' src='jquery.autocomplete.js'></script>

<script type='text/javascript' src='localdata.js'></script> //使用本地文件时引入此js

<link rel="stylesheet" type="text/css" href="../jquery.autocomplete.css" />

<link rel="stylesheet" type="text/css" href="../lib/thickbox.css" />

2.
//增加如下代码

<script type="text/javascript">

$().ready(function() {

$("#autocompletebox").autocomplete("search.php", {

width: 260,

selectFirst: false,

max: 20,

});

$("#autocompletebox").result(function(event, data, formatted) {

if (data)

$(this).parent().next().find("input").val(data[1]);

});

});

</script>



//html文件中要使用autocomplete的文本框如下

<input type="text" id="autocompletebox">
3.

//search.php为根据输入的关键词生成数据的文件，格式如下：

<?php
$q = strtolower($_GET["q"]);
if(!$q) return;

$con=mysql_connect("localhost:3306","root","");
if(!$con){
die('Could not connect:'.mysql_error());
}
mysql_select_db("number_domain",$con);

$sql="select * from nd_search";
$result=mysql_query ($sql);
while ( $row= mysql_fetch_array ($result))
{
if ( strpos (strtolower ( $row['keyword']) ,$q) !== false ) {
echo $row['keyword'] . "\n";
}
} ?>


完成 在IE下是正确的 在fixfox中会输入中文是会有问题：
问题原因：
Autocomplete插件对用户输入字符的触发自动匹配是通过”keydown”事件进行的（可分析jquery.autocomplete.js第92行），在IE6中，当输入法打开时，输入的字符是不会触发”keydown”的，只有中文输入完毕才触发之，所以中文输入和latin文没有区别的；但在firefox3.0下，无论输入法打开否，按键都会触发”keydown”事件，所以造成中文输入完毕，自动匹配的是刚才打出的部分中文拼音字母。

解决办法:

网上查到的最多做法是修改jquery.autocomplete.js第92行，将”keydown”替换为”keyup”，但这个不是根本办法，虽然这样改后可在firefox中及时对输入的中文进行自动匹配，但将原插件中回车、tab等重要的事件机制破坏了，比如这样改后，如果你的input是在一个form里的话，回车从原来的将选定项输入到input中变为了直接提交form表单了，这并不是我们想要的。

我的方法原理是，补充一个原插件触发查询的事件，就是当input输入栏发生字符变化时，重新进行查询（调用其内部的onChange函数），这里主要针对firefox而言，因为我们的系统访问最多的是IE和firefox。而恰好firefox有一个input变化的事件就是oninput，那么我们只要在原jquery.autocomplete.js第199行，插入如下代码：

.bind("input", function() {
// @hack by liqt:support for inputing chinese characters in firefox
onChange(0, true);
});