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

Javascript
经常用到的JavasScript事件的翻译
Javascript下的keyCode键码值表
用javascript动态调整iframe高度的代码
javascript应用:Iframe自适应其加载的内容高度
javascript 控制弹出窗口
用javascript父窗口控制只弹出一个子窗口
给moz-firefox下添加IE方法和属性
FireFox中textNode分片的问题
对google个性主页的拖拽效果的js的完整注释[转]
身份证号码前六位所代表的省,市,区, 以及地区编码下载
一个友好的.改善的 Object.prototype.toString的实现
如何写一个通用的JavaScript效果库!(1/2)
如何写一个通用的JavaScript效果库!(2/2)
几个高效,简洁的字符处理函数
无语,javascript居然支持中文(unicode)编程!
ie 处理 gif动画 的onload 事件的一个 bug
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
firefox 和 ie 事件处理的细节,研究,再研究-----书写同时兼容ie和ff的事件处理代码
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
JavaScript 中的replace方法说明

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 337 ::
收藏到网摘: 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。

还有,

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