看看http://jqueryui.com/demos/autocomplete/
它的设置简单易行,可以达到目的。您可以创建一个值数组并将其提供给 Autocomplete,或者您可以让它调用您的 php 页面并解析返回的 JSON 数据。
正如所承诺的,这里有一个示例代码可以帮助您进行操作。请注意,此代码使用本地 javascript 变量为自动完成框准备建议。您可以轻松地更新它以从您的 php 页面中查找 JSON 数据,我可以轻松地让您做到这一点,但目的是帮助您学习,所以我认为这样对您来说会更好,这样您就可以看到它是如何工作的,并且然后根据您的需要进行相应更新。在这里,您可以简单地复制粘贴此代码并查看它运行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/black-tie/jquery-ui.css" type="text/css" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>
<script>
$(document).ready(function() {
$( "#AC" ).autocomplete({
source: programmingLang
});
});
var programmingLang = ["ActionScript","AppleScript","Asp","BASIC","C","C++",
"Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell",
"Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];
</script>
</head>
<body>
<input type=text name="AC" id="AC">
</body>
</html>