当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript搜索自动提示功能的实现

Javascript
学习JavaScript里面的变量的应用
内容拷贝增加版权信息的JavaScript代码
JS扩展Photoshop新功能
学习JS之简单语句的写法
Javascript 最简单检测网速的方法和应用
Javascript 编程规范
关于DOM事件模型的两件事
关于JavaScript开发时的五个小提示
用javascript来实现动画导航
AJAX技术介绍
Ajax程序设计入门
学习Ajax教程,详细了解Get与Post
关于Ajax responseText 的一点阐述
ajax中文乱码解决方法
AJAX中文问题总结
AJAX无刷新更新数据
很简单的javascript函数不刷新页面---刷新数据
利用XMLHTTP无刷新添加数据
用XMLHTTP Post/Get HTML页面时的中文乱码之完全Script解决方案
成功实现ajax,xmlhttp跨域访问

Javascript 中的 javascript搜索自动提示功能的实现


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 201 ::
收藏到网摘: n/a

使用 jQuery(Ajax)/PHP/MySQL实现自动完成功我觉得我有必要写这个教程,因为曾经见到的大部分关于自动完成的应用程序都只是给你一个程序源码包,然后告诉你怎么使用,而不是告诉你它是如何工作的以及为什么这样做。 使用 jQuery(Ajax)/PHP/MySQL实现自动完成功能
一如往常,demo和源码的zip包在文章最后,慢慢欣赏吧!
我觉得我有必要写这个教程,因为曾经见到的大部分关于自动完成的应用程序都只是给你一个程序源码包,然后告诉你怎么使用,而不是告诉你它是如何工作的以及为什么这样做。而知道这些可以让你对这个插件可以进一步的按自己的需求定制(关于这一点我在我的blog里写过不少关于其他应用的文章)。

好,我们现在开始。
JavaScript代码:

复制代码 代码如下:
PHP后台程序(rpc.php):
如你所知(译注:不好意思,看王小波就学会了这么个口头禅),我的php后台程序都叫做rpc.php(RPC指远程过程调用),而没用它实际执行的功能来命名,但是也还不错了。

复制代码 代码如下:
主文件HTML:

<div>
<div>
Type your county (for the demo):
<input size="30" id="inputString" onkeyup="lookup(this.value);" type="text" />
</div> <div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</div>
这是主文件的部分html代码,你需要添加的就是一个输入框,并且把 ‘onkeyup' 函数设置为lookup(this.value)。另外,我建议你不要修改它的ID,如果你不想修改上面的Javascript代码的话。
截图:
我想你应该会想要看看最后的效果是什么样子,OK。

还有,

最后就是有用的链接了,我想你应该期待很久了。
打包文件