14-基于用户输入的数据动态创建建议列表

9.5.6　基于用户输入的数据动态创建建议列表

我们可以进一步改进这段程序，接受用户输入，然后向服务器发起Ajax请求来获得需要显示的建议列表。

此时书籍存放在一个MySQL数据库中（此例中名为 books 的表存放在名为 test 的数据库中）。其描述和内容如下：

CREATE DATABASE IF NOT EXISTS test; 
USE test; 
DROP TABLE IF EXISTS books; 
CREATE TABLE books ( 
　id int(10) unsigned NOT NULL auto_increment, 
　title varchar(100) NOT NULL, 
　PRIMARY KEY　(id) 
); 
INSERT INTO books (id, title) VALUES 
　(1,"Web development with J2EE"), 
　(2,"Practical CSS & JavaScript"), 
　(3,"Practical Ruby on Rails"), 
　(4,"Introduction to HTML & CSS"), 
　(5,"jQuery UI");

发起一个Ajax请求，返回需要显示的建议列表：

 <script src = jquery.js></script> 
 <script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script> 
 <link rel=stylesheet type=text/css 
　　　  href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css /> 
 <h3>Enter the name of the book:</h3> 
 <input id=book /> 
 <script> 
$("input#book").autocomplete ({ 
　source : function (request, callback) 
　{ 
　　var data = { term : request.term }; 
　　$.ajax ({ 
　　　url : "action.php", 
　　　data : data, 
　　　complete : function (xhr, result) 
　　　{ 
　　　　if (result != "success") return; 
　　　　var response = xhr.responseText; 
　　　　var books = []; 
　　　　$(response).filter ("li").each (function () 
　　　　{ 
　　　　　books.push ($(this).text ()); 
　　　　}); 
　　　　callback (books); 
　　　} 
　　}); 
　} 
}); 
</script> 

用户输入的文本通过 request.term 获取，紧接着发起一个Ajax请求。请求完成后，对服务器的响应内容进行分析：将每个

<?
　$term = $_REQUEST["term"]; 
　$term = utf8_decode ($term); 
　$bd = mysql_connect ("localhost", "root", "pwd"); 
　$ret = mysql_select_db ("test", $bd); 
　$query = sprintf ( 
　　　　 "SELECT * FROM books WHERE title LIKE '%%%s%%'", 
　　　　 mysql_real_escape_string($term)); 
　 // 执行查询　　　　
　 $result = mysql_query($query); 
　 if ($result) 
　 { 
　　 // 将查询结果发回给浏览器
　　 while ($row = mysql_fetch_assoc($result)) 
　　 { 
　　　 echo ("<li>" . utf8_encode ($row["title"]) . "</li>"); 
　　 } 
　　 mysql_free_result($result); 
　 }
　 mysql_close ($bd); 
?>