利用HTML5与jQuery技术创建一个简单的自动表单完成
来源:GBin1.com
谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项。然而今天我要寻找一个替代的解决方案。由DevBridge开发的jQuery Autocomplete插件有确切的功能,我觉得非常有吸引力。你在打字的时候,结果将出现在下拉菜单底部,自动突出显示的词语。本教程简单介绍了通过加载JavaScript数组的内容运行这个插件。从后端文件加载Ajax内容或者从数据库中加载文本内容都是可行的,在本教程中,更容易使用本地数据。查看以下演示,了解这个插件吧。
创建页面
首先下载jQuery Autocomplete插件,这里使用的是压缩后的版本,以及最新的jQuery脚本的副本。因为我在JavaScript数组里保留了所有选择项,于是将自定义脚本移动到了另一个单独的文件中。
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Input Autocomplete Suggestions Demo</title>
<link rel="shortcut icon" href="http://designshack.net/favicon.ico">
<link rel="icon" href="http://designshack.net/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="style.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>
<script type="text/javascript" src="js/currency-autocomplete.js"></script>
</head>
安装过程并不难,所有HTML都是通用的,你可以在页面中执行任何类型的搜索设计,结果都将正常工作。我使用外容器,ID #searchfield,整体格式置于中央。没有提交按钮,但结果将自动出现在输入的动态文字段下方。
<div id="content">
<h1>World Currencies Autocomplete Search</h1>
<p>Just start typing and results will be supplied from the JavaScript. Check out <a href="https://github.com/devbridge/jQuery-Autocomplete">jQuery Autocomplete</a> on Github.</a></p> <div id="searchfield">
<form><input type="text" name="currency" class="biginput" id="autocomplete"></form>
</div><!-- @end #searchfield --> <div id="outputbox">
<p id="outputcontent">Choose a currency and the results will display here.</p>
</div>
</div><!-- @end #content -->
我们可以通过使用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; }
如果你想保持在一个单独的样式表,它仍然通过加载就行了。不过我尝试了对资源进行整合,从而减少浏览器发出的HTTP请求。头两类是针对整个弹出选择行,以 及每个内部选择行。你可以把它们的风格改造成任何适合你网站的样式。伴随CSS还有精心挑选的元素类,用于突出显示已经由用户输入的文本内容。
#searchfield { display: block; width: 100%; text-align: center; margin-bottom: 35px; } #searchfield form {
display: inline-block;
background: #eeefed;
padding: 0;
margin: 0;
padding: 5px;
border-radius: 3px;
margin: 5px 0 0 0;
}
#searchfield form .biginput {
width: 600px;
height: 40px;
padding: 0 10px 0 10px;
background-color: #fff;
border: 1px solid #c8c8c8;
border-radius: 3px;
color: #aeaeae;
font-weight:normal;
font-size: 1.5em;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}
#searchfield form .biginput:focus {
color: #858585;
}
无论你怎样设计,搜索区域本身不会有什么不一样的问题。jQuery Autocomplete插件适合任意宽度的搜索区域,所有选择项都能以同样的布局整洁排列呈现出来。我的设计确实占用了大量页面上的空间,但这个插件能帮助改善修复这个不完美的地方,而我不需要自定义太多内容。
实现自动完成
如果你使用的是后端Ajax调用来获取数据结 果,那 么你需要执行自己的搜索功能了。jQuery Autocomplete识别某些可响应数据,例如XML/JSON,然后由PHP, Rails, Python, ASP.NET等返回。因此,通常情况是通过搜索你的数据库表中的条目,并拉出所有相关站点和它们的网址,然后把列表返回到你的浏览器。我用 JavaScript所创建的条目行是世界各地主要货币,当你输入国家或者货币名字的时候,你会看到一个选择项目清单从数组直接拉出。我复制了一小部分内 容来演示它是如何完成的。
$(function(){
var currencies = [
{ value: 'Afghan afghani', data: 'AFN' },
{ value: 'Albanian lek', data: 'ALL' },
{ value: 'Algerian dinar', data: 'DZD' },
{ value: 'European euro', data: 'EUR' },
{ value: 'Angolan kwanza', data: 'AOA' },
{ value: 'East Caribbean dollar', data: 'XCD' },
...
{ value: 'Vietnamese dong', data: 'VND' },
{ value: 'Yemeni rial', data: 'YER' },
{ value: 'Zambian kwacha', data: 'ZMK' },
{ value: 'Zimbabwean dollar', data: 'ZWD' },
];
在jQuery运行你自定义功能之前,以下内容还需要完成。我选择的是保持阵列和自定义函数调用存储在同一个JS文件中。不过你可以选择独立的函数数据,将它们移动到不同的两个文件。现在自动完成插件只需要少量的默认代码。我复制了模板以及在线演示,你可以查看我用相同的参数能 够做到哪些。
$('#autocomplete').autocomplete({
lookup: currencies,
onSelect: function (suggestion) {
// some function here
}
}); // setup autocomplete function pulling from currencies[] array
$('#autocomplete').autocomplete({
lookup: currencies,
onSelect: function (suggestion) {
var thehtml = '<strong>Currency Name:</strong> ' + suggestion.value + ' <br> <strong>Symbol:</strong> ' + suggestion.data;
$('#outputcontent').html(thehtml);
}
});
查找参数仅用于本地数据,并且我们的目标是一个数组时。每当用户选择一个选项时onSelect将触发一个新的函数。以下的在线演示中我们简单的创建一个新的HTML字符串输出选定的名字和值。请注意,下面的演示只是最基本的例子,你还可以加以扩展。到jQuery Autocomplete documentation上面看看有什么关于其他参数的好点子。我只是略懂皮毛,那些JavaScript开发人员能把函数调用例子放在一起。我想说的是这个插件很好获得,大家都可以使用,在必要情况下,甚至能使用静态数据。
后续
我本人非常推荐这个插件,之前我已经使用了几个不同的解决方案,但都没有这个插件好用。通过加载页面结果呈现选项与直接搜索结果两者之间有很大区别(比如 Google Instant)。在使用这款插件之前,首先要确保你有一个很好的计划,构建工作性能良好的用户界面。jQuery Autocomplete插件完全免费的,所有代码都在MIT license提供出来了。
via 极客标签
来源:利用HTML5与jQuery技术创建一个简单的自动表单完成
利用HTML5与jQuery技术创建一个简单的自动表单完成的更多相关文章
- Docker容器技术-创建一个简单的Web应用
一.创建一个简单的Web应用 1.identicon 基于某个值而自动产生的图像,这个值是IP地址或用户名的散列值. 用途: 通过计算用户名或IP地址的散列值,在网站上提供用于识别用户的图像,以及自动 ...
- 使用jQuery.extend创建一个简单的选项卡插件
选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...
- 利用JSP编程技术实现一个简单的购物车程序
实验二 JSP编程 一.实验目的1. 掌握JSP指令的使用方法:2. 掌握JSP动作的使用方法:3. 掌握JSP内置对象的使用方法:4. 掌握JavaBean的编程技术及使用方法:5. 掌握JSP ...
- java最简单的知识之创建一个简单的windows窗口,利用Frame类
作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 QQ986945193 微博:http://weibo.com/mcxiaobing 首先给大家看一下 ...
- 一个先进的App框架:使用Ionic创建一个简单的APP
原文 http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framewor ...
- Python创建一个简单的区块链
区块链(Blockchain)是一种分布式账本(listributed ledger),它是一种仅供增加(append-only),内容不可变(immutable)的有序(ordered)链式数据结构 ...
- 如何创建一个简单的C++同步锁框架(译)
翻译自codeproject上面的一篇文章,题目是:如何创建一个简单的c++同步锁框架 目录 介绍 背景 临界区 & 互斥 & 信号 临界区 互斥 信号 更多信息 建立锁框架的目的 B ...
- Windows 8.1 应用再出发 (WinJS) - 创建一个简单项目
前面几篇我们介绍了如何利用 C# + XAML 完成Windows Store App 功能的实现,接下来的几篇我们来看看如何利用 Html + WinJS 来完成这些功能. 本篇我们使用WinJS ...
- Highcharts创建一个简单的柱状图
新建一个html文件,将highcharts引入到你的页面后,通过两个步骤我们就可以创建一个简单的图表了. 1.创建div容器 在页面的 body部分创建一个div,并指定div 的 id,高度和宽度 ...
随机推荐
- H264 帧边界识别简介
http://blog.csdn.net/wzw88486969/article/details/50364017
- OOX之间的关系
OOA,OOD,OOP三者关系OOA的分析结果可以作为OOD的需求模型OOD的设计结果作为OOP的指导蓝图OOP负责最终实现目标系统
- 1.L 查询关键字 HEXLOC
Take the compile listing for the program that has either OFFSET or LIST option selected. Use the OFF ...
- python itertools的使用(转)
1. chain的使用 import itertools listone = ['a','b','c'] listtwo = ['11','22','abc'] for item in itertoo ...
- [xsy1232]Magic
题意:一个无向图,每个点有$a_i,b_i$,对任意点$i$你都可以花费$b_i$的费用将$a_i$变为$0$,最后你还要付出$\sum\limits_{i=1}^n\max\limits_{(i,j ...
- kong结合consul
早期版本 ./etcdctl ls / --recursive /name /name1 /name1/wyc /name1/wu /name1/chao /name1/chao/age ------ ...
- 用WPF写了一个弹幕播放器
看弹幕视频的时候,如果不发弹幕,一个本地的弹幕播放器往往能带来更好的体验.目前已经有一些实现了,最初用过一个MukioPlayer, 后来又用过一个用C++写的BiliLocal,这个程序能自动下载弹 ...
- NHibernate之一级缓存(第十篇)
NHibernate的一级缓存,名词好像很牛B,很难.实际上就是ISession缓存.存储在ISession的运行周期内.而二级缓存则存储在ISessionFactory内. 一.ISession一级 ...
- FIS常用功能之MD5版本
静态资源后缀加上md5参数,有效解决缓存更新问题 fis release --optimize --md5 使用前后对比:
- PHP的方法重载实现
PHP提出面向对象以来,就有着各种各样的问题,其中,不直接支持对象方法重载就是一个让人纠心的问题,在其他语言里面,大可以有以下写法(以下是C++写法): class Abc(){ public fun ...