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

Javascript
javascript options属性集合操作代码
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
javascript 显示当前系统时间代码
firefox和IE系列的相关区别整理 以备后用
extJs 常用到的增,删,改,查操作代码
Javascript 面向对象特性
JavaScript的public、private和privileged模式
通过javascript设置css属性的代码
javascript iframe编程相关代码
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
js DOM模型操作
js 学习笔记(三)
用js做一个小游戏平台 (一)
jquery UI 1.72 之datepicker
jQuery的三种$()
JavaScript 常用函数
用javascript实现源代码的隐藏与解密的方法
javascript Onunload与Onbeforeunload使用小结
Javascript的闭包
JavaScript 对Cookie 操作的封装小结

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


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

还有,

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