首页 | 旅游 | 健康 | 时尚 | 下载 | 论坛 | 图文 | 专题 | 地图
资讯 IT人 电脑入门 操作系统 上网 办公 技巧 硬件 软件 网络 图像 多媒体 程序 数据库 网页制作 网站开发 网游 安全 加密 企业

搜索自动提示功能的实现

巧巧读书 2008-03-13  令狐葱 技术论坛

主文件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。

搜索自动提示功能的实现(图二)

还有,

搜索自动提示功能的实现(图三)

最后就是有用的链接了,我想你应该期待很久了。
源文件AutoComplete Source ZIP

上一个话题:Javascript风格要素 Ⅰ
下一个话题:通用滑动门类
本类最热图文
巧巧读书图文推荐
Google
巧巧电脑频道编辑信箱  告诉我们您想看的专题或文章