用PHP JS实现自动搜索提示(示例)

我认为我有必要写这篇教程，因为我看到的大多数关于自动完成的应用程序只是给你一个源代码包，然后告诉你如何使用它，而不是告诉你它是如何工作的以及为什么。了解这一点将允许您根据自己的需要进一步定制这个插件。

好了，我们现在开始吧。JavaScript代码：复制的代码如下： script src=' http : jquery-1 . 2 . 1 . pack . js ' type=' text/JavaScript '/script script type=' text/JavaScript ' function lookup(InputString){ if(InputString . length==0){//隐藏建议框。$(' #建议')。hide()；} else { $。post(' . RPC . PHP '，{ query string : ' ' InputString ' ' })，function(data){ if(data . length 0){ $(' #建议')。show()；$(' # autosuggestionlist ')。html(数据)；} });} }//lookup function fill(this value){ $(' # InputString ')。val(this VaLue)；$(' #建议')。hide()；}/scriptJS解释：从上面的代码中，我们需要连接到一个名为rpc.php的文件，它处理所有的操作。查找函数使用从文本输入框中获得的单词，然后在jQuery中使用Ajax方法POST将其发送到rpc.php。如果输入字符' ' inputString ' '是' 0 '(零，这里，搜索框什么都不输入)，意见箱是隐藏的，也很人性化。你认为，如果搜索框里什么都没有输入，就不会出现建议提示框。如果输入框中有东西，我们得到这个“输入字符串”，并将其传递给rpc.php页面，然后是$。jQuery的post()函数使用如下：$。post (URL、【数据】、【回调】)这个‘回调’部分可以关联一个函数，比较有意思。只有当数据加载成功时，它才会被执行。如果返回的数据不是空的(即有东西要显示)，那么将显示搜索提示框，其中的html代码将被返回的数据替换。就这么简单！Php守护进程(rpc.php):大家知道，我的php守护进程叫rpc.php(RPC指远程过程调用)，它不是以实际执行的函数命名的，但也还不错。复制代码如下：//PHP 5 implementation-使用mysqli。$ db=new MySQL(' localhost '，' root '，"，' autocomplete ')；if(！$db) { //如果无法连接，则显示错误。回声“错误：无法连接到数据库。”；} else { //是否有发布的查询字符串？if(isset($ _ POST[' query string ']){ $ query string=$ _ POST[' query string ']；//字符串长度是否大于0？if(strlen($queryString) 0) { //运行查询：我们使用LIKE '$queryString%' //百分比符号是一个通配符，在我的国家示例中它是这样工作的…/$ query string=' Uni '；//返回数据='美国，联合金杜姆'；$ query=$ db-query(' SELECT value FROM country WHERE value LIKE ' $ query string % ' LIMIT 10 ')；if($query) { //虽然有结果循环通过它们——获取一个Object(我喜欢PHP5 btw！).虽然($ result=$ query-fetch _ object()){//格式化结果，但我使用li作为列表，您可以更改它。onClick函数用结果填充文本框。echo 'li onclick='fill(')。$结果值。'');''.$结果值。/Li '；} } else { echo 'ERROR:查询有问题。} }其他{ //不要做任何事情。} //有一个queryString。} else { echo '不应直接访问此脚本！'；}}?PHP代码解释：由于我在代码中添加了很多注释，这里就不赘述了。通常，您需要接收这个“QueryString”，并在末尾使用通配符来生成查询语句。这意味着在这种情况下，每次键入字符时，都需要生成查询语句。如果一直这样下去，我担心MYSQL会受不了。但是，为了尽可能简化流程，对于较小的应用程序来说应该没有问题。这段php代码需要在您自己的系统中稍加修改，例如，您需要将“$ query”更新到您自己的数据库中，并且您需要查看数据库表的列名放在哪里。CSS样式：我用的是CSS3。天哪，它真的很容易使用，尽管在火狐或Safari中会有限制。

复制代码代码如下：style type='text/css ' .建议框{位置：相对；left : 30pxmargin : 10px 0px 0px 0px宽度： 200像素；背景色： # 212427;-moz-border-radius : 7px；-网络套件-边框-半径： 7pxborder: 2px固体# 000;color: # fff}。建议列表{ margin : 0pxpadding : 0px }。建议列表Li { margin : 0px 0px 3px 0pxpadding : 3pxcursor :指针；}.建议列表李：悬停{底色： # 659 CD8}/styleCSS代码都很标准，没什么需要特别指出的。主文件HTML:这是主文件的部分超文本标记语言代码，你需要添加的就是一个输入框，并且把' onkeyup '函数设置为查找(this.value)。另外，我建议你不要修改它的身份证，如果你不想修改上面的爪哇岛描述语言代码的话。截图：我想你应该会想要看看最后的效果是什么样子好的。

还有，

最后，这是一个有用的链接。我觉得你应该期待很久。源文件：点击下载。