用php实现搜索自动提示（实例）

我认为我有必要写这篇教程，因为我在自动完成过程中看到的大部分应用程序都只是给你一个程序源包，然后告诉你如何使用它，而不是告诉你它是如何工作的，为什么要这样做，并且知道这将允许你根据自己的需要进一步定制插件。



好吧，我们现在开始吧。
Javaｓｃｒｉｐｔ代码：
复制代码代码如下所示：


函数查找（InputString）{
如果（inputstring.length = = 0）{
建议箱。隐藏
$（#建议）隐藏（）；
{人}
美元
如果（data.length > 0）{
$（#建议）显示（）；
$（# autosuggestionslist）。Html（数据）；
}
}）；
}
}查找
功能填充（以）{
$（# InputString）瓦迩（这个）；
$（#建议）隐藏（）；
}


JS的解释：
嗯，你可以看到从上面的代码中，我们需要连接到一个文件名为rpc.php，它处理所有的操作。
查找函数使用的文字输入框和jQuery然后使用Ajax的方法传递给rpc.php。
如果输入的字符是InputString（零、0，在搜索框中没有任何输入），意见箱是隐藏的，你认为它是非常人性化的，，如果没有在搜索框中输入，你不想提出一个建议箱。
如果在输入框中有一种东西，我们把这个InputString并把它传递给rpc.php页，然后美元。后（）函数jQuery的使用，如下：
元（URL，{数据}，{回调}）
的callback'part可以与功能相关。这更有趣。只有在成功加载数据时才会执行该操作。翻译：这里是免费翻译，不读原文：<数据>。
如果返回的数据（数据）不是空的（即必须显示某些东西），则它显示搜索提示框，并使用返回的数据（数据）而不是HTML代码。
很简单！
PHP守护进程（RPC）：
你知道，我的PHP后台程序称为（指rpc.php RPC远程过程调用），但不为其实际执行功能后，但它也很好。
复制代码代码如下所示：
实现使用mysqli。 / / PHP5
$ db =新mysqli（'localhost '，'根'，'自动'）；
如果（！$ DB）{
如果不能连接就出错。显示
错误：无法连接到数据库；
{人}
有一个已发布的查询字符串
如果（isset（$ _post { 'querystring ' }））{
美元美元'querystring_post QueryString = { }；
字符串长度大于0吗
如果（strlen（美元的）> 0）{
查询：我们使用像 /运行查询美元%
在我的例子中，百分比符号是一个通配符…
/ / 统一的美元=；
/ /返回的数据=美国、英国的；
查询=美元美元DB ->查询（选择价值从国家价值的QueryString %限10美元）；
如果（$查询）{
结果通过循环/当他们取一个对象（我喜欢PHP5 BTW！）。
而（$结果= $查询-> fetch_object（））{
结果 / im，IM用于列表，您可以更改它。
onclick函数填充文本框/结果。
值；
}
{人}
错误：查询有问题；
}
{人}
做任何事。 /不
是一个字符串。 / }
{人}
不应该直接访问这个脚本！；
}
}
>

PHP代码解释：
由于我在代码中添加了很多注释，所以我不会在这里详细说明。
在一般情况下，你需要接受这个查询，然后生成查询语句最后的通配符。
这意味着，在这种情况下，每当我们敲入一个字符时，我们就需要生成一个查询语句。如果我们总是这样做，恐怕MySQL将不能忍受它，但为了尽可能简化过程，它不应该是一个较小的应用程序的问题。
这个PHP代码需要在您自己的系统中稍加修改，例如，您需要向自己的数据库更新$查询，您需要查看将数据库表的列名放在何处等等。
CSS样式：
我使用CSS3，我的上帝，真的很好，虽然会有功能限制在Firefox或Safari浏览器。
复制代码代码如下所示：

{。suggestionsbox
职位：相对；
左：30px；
保证金：10px 0px 0px 0px；
宽度：200px；
背景颜色：# 212427；
-moz边界半径：7px；
WebKit的边界半径：7px；
边境：2px固体# 000；
颜色：# FFF；
}
{。suggestionlist
保证金：0px；
填料：0px；
}
suggestionlist李{。
保证金：0px 0px 3px 0px；
填料：3px；
光标：指针；
}
suggestionlist {李：悬停。
背景颜色：# 659cd8；
}


CSS代码非常标准，没有什么特别的东西可以指出。
主文件html：
这是主文件的HTML代码的一部分，你需要添加一个输入框和onkeyup功能设置为查找（这个值）。另外，我建议你不要改变它的身份，如果你不想修改Javaｓｃｒｉｐｔ代码以上。
截图:
我想你应该看看最终效果是什么样子，好吗。


也uff0c


最后，它是一个有用的链接。我想你早就期待这个了。
源文件：单击下载