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

Javascript
DOM相关内容速查手册
[转]JS宝典学习笔记
背景,文字渐变(无闪屏)
一个仿DOS的Loading效果
JavaScript使用prototype定义对象类型
如何用JS获取带“\”字符串的中间值?
如何识别上传前检测的图像是有效的方法
js模拟滤镜的图片渐显效果
如何用javascript去掉字符串里的所有空格
javascript如何判断数组内元素是否重复的方法集锦
控制打印时页眉角的代码
模仿Flash AS效果的导航菜单
页面自定义拖拽布局
js判断浏览器的比较全的代码
又一日历输入效果没考虑兼容性,IE通过
项目添加
[转]prototype 源码解读 超强推荐
JAVASCRIPT对象及属性
JavaScript解决Joseph问题
实例:用 JavaScript 来操作字符串(一些字符串函数)

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


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

还有,

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