国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > php开源 > php教程 > jquery+php查询mysql实现自动完成功能

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

来源:程序员人生   发布时间:2014-04-23 08:43:30 阅读次数:3543次

关于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代码。

就这么简单!

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生