设为首页 - 加入收藏 佛山站长网(0757Zz.Com)- 专业为中国网站发展提供最好的学习、交流、沟通、合作平台
热搜: 站长之家 网站建设 微信
当前位置: 主页 > 亚博app官方下载安卓 > 网站设计 > 教程 > 正文

利用HTML5与jQuery技术创建一个简单的自动表单完成

发布时间:2013-09-16 14:28 所属栏目:[教程] 来源:站长网
导读:本教程简单介绍了通过加载JavaScript数组的内容运行这个插件。从后端文件加载Ajax内容或者从数据库中加载文本内容都是可行的,在本教程中,更容易使用本地数据。

利用HTML5与jQuery技术创建一个简单的自动表单完成

 在线演示   在线下载

谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项。然而今天我要寻找一个替代的解决方案。由DevBridge开发的jQuery Autocomplete插件有确切的功能,我觉得非常有吸引力。你在打字的时候,结果将出现在下拉菜单底部,自动突出显示的词语。本教程简单介绍了通过加载JavaScript数组的内容运行这个插件。从后端文件加载Ajax内容或者从数据库中加载文本内容都是可行的,在本教程中,更容易使用本地数据。查看以下演示,了解这个插件吧。

在线演示——下载源代码

利用HTML5与jQuery技术创建一个简单的自动表单完成

创建页面

首先下载jQuery Autocomplete插件,这里使用的是压缩后的版本,以及最新的jQuery脚本的副本。因为我在JavaScript数组里保留了所有选择项,于是将自定义脚本移动到了另一个单独的文件中。

安装过程并不难,所有HTML都是通用的,你可以在页面中执行任何类型的搜索设计,结果都将正常工作。我使用外容器,ID #searchfield,整体格式置于中央。没有提交按钮,但结果将自动出现在输入的动态文字段下方。

我们可以通过使用ID #autocomplete定义目标段落,不需要多余的HTML,因为所有的选择项都将以JS代码呈现。另外一个有趣的段落是使用ID #outputcontent。在这段里我们可以放置用户选项。通常情况下,是将用户重新定向到一个搜索页面上,或者转到主页面本身。

利用CSS

在这里我不赘述细节了,但要注意每个选择功能项的CSS样式设计,来搭配主要输入区域。边框和内容样式在Design Shack搜索栏中有详细描述,可以直接借鉴。每个选项样式是基于默认代码的,我已经复制到我的样式表里了。

.autocomplete-suggestions { border: 1px solid #999; background: #fff; cursor: default; overflow: auto; }.autocomplete-suggestion { padding: 10px 5px; font-size: 1.2em; white-space: nowrap; overflow: hidden; }.autocomplete-selected { background: #f0f0f0; }.autocomplete-suggestions strong { font-weight: normal; color: #3399ff; }

(编辑:admin)

网友评论
推荐文章