jquery+php查询mysql实现自动完成功能

关于jquery+php查询mysql实现自动完成功能,写这个教程,因为曾经见到的大部分关于自动完成的应用程序都只是给你一个程序源码包,然后告诉你怎么使用,而不是告诉你它是如何工作的以及为什么这样做。而知道这些可以让你对这个插件可以进一步的按自己的需求定制(关于这一点我在我的blog里写过不少关于其他应用的文章)。

好,我们现在开始。

JavaScript代码

<script src="jquery-1.2.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">

function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
(‘#suggestions’).hide();
} else {
.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
(‘#suggestions’).show();
(‘#autoSuggestionsList’).html(data);
}
});
}
} // lookup

function fill(thisValue) {
(‘#inputString’).val(thisValue);
(‘#suggestions’).hide();
}

</script>

JS的解释:

好,从上面的代码看到,我们需要连接到一个叫做rpc.php的文件,这个文件处理所有的操作。

lookup函数使用从文本输入框中得到的单词然后使用jQuery中Ajax的方法POST把它传给rpc.php。

如果输入字符 ‘inputString’是‘0’(Zero,译注:在这里是指在搜索框中没输入任何内容),建议框就被隐藏,这也很人性化,你想,如果在搜索框中没有输入任何东西,你也不期望会出现个建议提示框。

如果输入框中有内容,我们就得到了这个 ‘inputString’并传递给rpc.php页面,然后jQuery 的.post()函数被使用,如下:

.post(url, [data], [callback])

‘callback’部分可以关联一个函数,这个比较有意思,只有在数据(data)被加载成功的时候才会执行(译注:此处为意译,没看懂原文:<).

如果返回的数据(data)不为空(也就是说,有东西要显示),那就显示搜索提示框并且使用返回的数据(data)来代替其中的html代码。

就这么简单!

波比源码 – 精品源码模版分享 | www.bobi11.com
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 本站源码并不保证全部能正常使用,仅供有技术基础的人学习研究,请谨慎下载
8. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!

波比源码 » jquery+php查询mysql实现自动完成功能

4 评论

  1. After all, what a great site and informative posts, I will upload inbound link – bookmark this web site? Regards, Reader. Onwin , Onwin Giriş , Onwin Güncel Giriş , Onwin Yeni Adres , onwin

  2. Thank you great posting about essential oil. Hello Administ . Metropol Halı Karaca Halı Öztekin ve Selçuklu Halı Cami Halısı ve Cami Halıları Türkiye’nin En Büyük Cami Halısı Fabrikasıyız…

  3. Thank you great posting about essential oil. Hello Administ . Hacklink , Hacklink panel , Hacklink al Hacklink panel

  4. Hi, just required you to know I he added your site to my Google bookmarks due to your layout. But seriously, I believe your internet site has 1 in the freshest theme I??ve came across.

发表评论

Hi, 如果你对这款模板有疑问,可以跟我联系哦!

联系站长
赞助VIP 享更多特权,建议使用 QQ 登录
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡