文档章节

一个自动填充( autocomple)的例子(使用JQuery Cool Auto-Suggest)

mifans
 mifans
发布于 2016/07/14 14:54
字数 475
阅读 2K
收藏 2

精选30+云产品,助力企业轻松上云!>>>

项目中要使用,看了很多,感觉这个插件比较靠谱,样式可控。逻辑比较简单(呵呵)

页面如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动填充实现后台</title>
<script language="javascript" type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.coolautosuggest.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.coolautosuggest.css" />
</head>
<body>
<input type="text" id="text1" name="text1" />
</body>
<script type="text/javascript">

$("#text1").coolautosuggest({
  url:"autoCompleted?key=",
//   showThumbnail:true,
//      showDescription:true,
//   	 submitOnSelect:true
});
</script>

</html>

后台使用jfinal,拿来就用,超级简单好用:

package com.siteplugin.web;

import java.util.ArrayList;
import java.util.List;

import com.alibaba.fastjson.JSONObject;
import com.jfinal.core.Controller;

public class IndexController extends Controller {

	public void index(){
		renderFreeMarker("index.html");
	}
	public void autoCompleted(){
		//[{"id":"18","data":"Angelina Jolie","thumbnail":"thumbnails\/jolie.jpg","description":"Actress"}]
		//可以扩充图片显示
		List<JSONObject> list=new ArrayList<JSONObject>();
		//String [] wordKey={"add","asd","sdgaafdg","ff","hh","dsd","hjk"};
		String [] wordKey={"你好","你是谁","什么你","你们是谁","我们","我和你","我和他"};
		String key=getPara("key");
		for (int i = 0; i < wordKey.length; i++) {
			if (wordKey[i].contains(key)) {
				JSONObject json=new JSONObject();
				//json.put("id", i+"");
				json.put("data", wordKey[i]);
				//json.put("thumbnail", "");
				//json.put("description", "");
				list.add(json);
			}
		}
		renderJson(list);
	}
}

效果如下:

 

其中几个注意的地方

一,返回结果 是个json的数组,样例数据

[{"id":"18","data":"Angelina Jolie","thumbnail":"jolie.jpg","description":"Actress"}]

json中的每个属性不是必须,如果用不到可以不使用,

比如我得返回结果是:(只是用了data属性)

[{"data":"我们"},{"data":"我和你"},{"data":"我和他"}]

二,另外这个插件有很多扩展功能,有需要可以参见官网上面的介绍

http://www.jq22.com/jquery-info425

http://w3shaman.com/article/jquery-cool-auto-suggest

可以实现类似于下图的功能:提示中包含图片

 

还有支持用户选择操作后触发某个动作,比如提交数据,代码类似如下:

$("#search-input").coolautosuggest({
			  url:"search!autoCompleted.action?key=",
			//   showThumbnail:true,
//			      showDescription:true,
//			   	 submitOnSelect:true
			  onSelected:function(result){
				  //验证选择后的数据是否正确
				  //alert("你输入的"+result.data);
                  //做点什么
				  search(result.data);
			  }
			});

 

完毕。

mifans
粉丝 11
博文 204
码字总数 103669
作品 0
海淀
程序员
私信 提问
加载中
此博客有 1 条评论,请先登录后再查看。
jQuery 自动补全组件--jQuery-Autocomple

Ajax Autocomplete for jQuery jQuery 的自动补全组件,支持 Ajax 获取远程数据,支持数据分组显示。 除了 jQuery 之外没有其它依赖。 标准的 jquery.autocomplete.js 文件大小约为13KB。 AP...

匿名
2017/01/17
2.9K
1
MySQL总结(4)

insert 数据的插入 INSERT插入数据 😀 插入完整的行;😀 插入行的一部分;😀 插入多行;😀 插入某些查询的结果。 插入多条行 INSERT SELECT 这个例子把一个名为 custnew 的表中的数据...

osc_k9n1wekt
2019/11/10
1
0
Django model update的各种用法介绍

Django开发过程中对表(model)的增删改查是最常用的功能之一,本文介绍笔者在使用model update过程中遇到的那些事 model update常规用法 假如我们的表结构是这样的 那么我们修改用户名和状态可...

osc_4ptjtnue
2018/09/07
2
0
[MyBatis日记](4)映射语句

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/SunnyYoona/article/details/50663860 MyBatis提供了多种元素来配置不同类型的语句,如 SELECT,INSERT,UPD...

sjf0115
2016/02/14
0
0
Django model update的各种用法介绍

Django model update的各种用法介绍 model update常规用法 假如我们的表结构是这样的: 那么我们修改用户名和状态可以使用如下两种方法: 方法一: 方法二: * 方法一适合更新一批数据,类似于m...

_Change_
2018/12/17
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

PG库实现 t+1 同步

需求:业务场景中有很多需要查询t+1的数据,但又不想影响生产实时的业务,是否可以搭建一个延时的灾备库就可以解决这个问题呢。 问题:如何实现延时? 解决方向:recovery_min_apply_delay ...

易野
44分钟前
17
0
jpgraph 实例文档

下载 在官方网站http://www.aditus.nu/jpgraph/ 下载jpgraph,其中1.X系列是用于PHP4的,2.X系列是用于PHP5的。 安装 将下载的得到的jpgraph压缩文件解压至相应的路径。 配置 首先需要注意的...

osc_2ch77h9m
44分钟前
9
0
画IDC状态趋势图

[背景]公司以前对IDC状态的测试都是通过perl+crond结合,向指定某IDC的IP发送icmp包,并将其结果保存到test.log下,对于后斯的分析,是采取手工的方式(格式化数据,结合excel),这样操作下...

osc_moibnxyj
45分钟前
13
0
整理性能计数器注释

[前话]收集性能计数器注释,以备使用! [内容] 1 % Processor Time (Processor _Total) 指处理器用来执行非闲置线程时间的百分比。计算方法是,度量处理器用来执行空闲线程的时间,然后用 10...

osc_5nscij7v
46分钟前
12
0
你想要的WinForm界面开发教程在这里 - 如何设置较厚的表格边框

下载DevExpress v20.1完整版 DevExpress Winforms Controls 内置140多个UI控件和库,完美构建流畅、美观且易于使用的应用程序。想要体验?点击下载>> 应用程序的外观随时代发展不断变化,自厚...

FILA6666
47分钟前
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部