手机版

javascript搜索页1/3自动提示功能的实现

时间:2021-11-26 来源:互联网 编辑:宝哥软件园 浏览:

使用jQuery(Ajax)/PHP/MySQL实现自动补全功能。像往常一样,演示和源zip都打包在文章的末尾。慢慢享受吧!我认为我有必要写这篇教程,因为我看到的大多数关于自动完成的应用程序只是给你一个源代码包,然后告诉你如何使用它,而不是告诉你它是如何工作的以及为什么。了解这一点将允许您根据自己的需要进一步定制这个插件(我在我的博客中写了许多关于其他应用程序的文章)。

好了,我们现在开始吧。JavaScript代码:复制的代码如下:脚本src=' http : jquery-1 . 2 . 1 . pack . js ' type=' text/JavaScript '/script script type=' text/JavaScript ' function lookup(inputString){ if(inputString . length==0){//hideshesgestonbox。$(' #建议')。hide();}else{ $。post(' . RPC . PHP ',{ query string : ' ' InputString ' ' }),function(data){ if(data . length 0){ $(' #建议')。show();$(' # autosuggestionlist ')。html(数据);} });} }//查找函数fill(this value){ $(' # InputString ')。val(this VaLue);$(' #建议')。hide();} /script JS解释:好了,从上面的代码来看,我们需要连接到一个名为rpc.php的文件,它处理所有的操作。查找函数使用从文本输入框中获得的单词,然后在jQuery中使用Ajax方法POST将其发送到rpc.php。如果输入字符' ' inputString ' '是' 0 '(零,这里,搜索框什么都不输入),意见箱是隐藏的,也很人性化。你认为,如果搜索框里什么都没有输入,就不会出现建议提示框。如果输入框中有东西,我们得到这个“输入字符串”,并将其传递给rpc.php页面,然后是$。jQuery的post()函数使用如下:$。post (URL、【数据】、【回调】)这个‘回调’部分可以关联一个函数,比较有意思。只有当数据加载成功时,它才会被执行。如果返回的数据不是空的(即有东西要显示),那么将显示搜索提示框,其中的html代码将被返回的数据替换。就这么简单!阅读下一页的全文。

版权声明:javascript搜索页1/3自动提示功能的实现是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。