文档章节

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

mifans
 mifans
发布于 2016/07/14 14:54
字数 475
阅读 366
收藏 2
点赞 0
评论 1

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

页面如下:

<!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
粉丝 10
博文 202
码字总数 102200
作品 0
海淀
程序员
加载中

评论(1)

推荐方案
推荐方案
实现一个智能提示功能需要JavaScript、ajax、数据库、jsp/php很多知识,
如果数据量大还需要特殊优化,一个小功能,花费太大精力不合适

但这是个可有可无的功能吗,肯定不是
对用户而言,可以有效降低输入成本,在面对输入框时,获得更多提示,不用那么迷茫和无助
对站长而言,可以优先推送网站的关键信息,等于多了一个广告位。

一所大学图书馆的搜索框智能提示,大约50万个词条(书名)
他们使用的是www.92find.com的搜索框智能提示免费产品,
只要一行javascript代码,就可以实现baidu、淘宝搜索框提示的全部功能
比如:拼音匹配、拼音前缀匹配、模糊搜索、智能容错,
还可以自定义提示词汇及其排序权重
你只需要准备好自己的提示词汇表就可以了,
无需编写程序,
五分钟 就可以在线配置拥有
主流搜索引擎都有的自动提示(自动补全)功能
jQuery 自动补全组件--jQuery-Autocomple

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

匿名
2017/01/17
853
1
mysql 整型数据类型

mysql支持标准SQL中的数值类型,支持标准的整型类型INTEGER和SMALLINT,并且扩展了标准类型,也支持TINYINT、MEDIUMINT和BIGINT。下面的表格中是每个类型的存储范围。 mysql整型存储范围表 ...

JettyWag
2016/11/13
22
0
CSS 水平对齐(Horizontal Align)

CSS 水平对齐(Horizontal Align) 在CSS中,有几个属性用于元素水平对齐。 块元素对齐 块元素是一个元素,占用了全宽,前后都是换行符。 块元素的例子: <h1> <p> <div> 文本对齐,请参阅 CS...

wybo521
2016/01/17
19
0
MySQL的Replace into 与Insert into ..... on duplicate

(1),没有key的时候,replace与insert .. on deplicate udpate相同。 (2),有key的时候,都保留主键值,并且autoincrement自动+1 不同之处:有key的时候,replace是delete老记录,而录入...

vga
2014/10/03
0
0
[译] Grid 布局完全指南

简介 CSS 栅格布局 (亦称 "Grid"),是一个基于栅格的二维布局系统,旨在彻底改变基于网格用户界面的设计。CSS 一直以来并没有把布局做的足够好。刚开始,我们使用 tables,后来是 floats,p...

shanyue
2017/02/09
0
0
[翻译]PyCairo指南--形状和填充

PyCairo中的形状和填充 PyCairo指南的这个部分,我们将创建一些基本的和更高级的形状。我们将使用单一颜色,patterns和渐变来填充他们。渐变将在另一章中讨论。 基本形状 PyCairo有一些基本的...

WolfCS
2013/05/21
0
0
suggest 是搜索引擎一个方便的功能

suggest 是搜索引擎一个方便的功能,对数据的关键字进行预测和建议,减少了用户的输入,大体的效果如下: 幸运的是 solr 也提供了类似的功能,在该功能的基础上,配合 jQuery 或 kissy 的自动...

zcl111
2016/01/30
15
0
Spring、Spring Boot 和 TestNG 测试指南 ( 3 )

原文出处:chanjarster Spring&Spring Boot Testing工具提供了一些方便测试的Annotation,本文会对其中的一些做一些讲解。 @TestPropertySource @TestPropertySource可以用来覆盖掉来自于系...

chanjarster
2017/12/10
0
0
WWDC2018 Safari与WebKit的新特性

Session 234: What’s New in Safari and WebKit 这个Session介绍了Safari与WebKit的新特性,主要面向三类人群 Web 网页开发者(主要是面相对象) Use WKWebView 原生开发者 Safari Extensi...

折腾范儿_味精
06/10
0
0
关于如何利用suggest添加Solr中自动提示功能的简介

suggest 是搜索引擎一个方便的功能,对数据的关键字进行预测和建议,减少了用户的输入,大体的效果如下: 幸运的是 solr 也提供了类似的功能,在该功能的基础上,配合 jQuery 或 kissy 的自动...

翊骷
2015/01/09
0
4

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Laravel5.5 MySQL配置、读写分离及操作

Laravel 让连接不同数据库以及对数据库进行增删改查操作: 参考:http://laravelacademy.org/post/854.html 配置读写分离 应用的数据库配置位于 config/database.php(但是数据库用户及密码等...

MichaelShu
7分钟前
0
0
Linux 查看用户

存储帐号的文件:/etc/passwd 存储密码的文件:/etc/shadow 查看当前系统所有用户 grep bash /etc/passwd root修改普通用户的密码 sudo passwd user_name 然后连续两次输入新的用户密码即可...

yeahlife
13分钟前
0
0
Webpack使用nodemon实时打包编译

业务场景: 1.编写一个npm组件包并且link到了项目文件中 2.需要不断的修改并run build编译npm包并且在项目run dev 查看效果 3.问题: 每次改完npm包都要手动run build编译十分的麻烦且低效,可不...

JamesView
24分钟前
0
0
电脑炸了,浪费我好几天时间,还是简要记下来吧

我的小本本一直在兢兢业业的干活,然而前几天说炸就炸了...... 爆炸现场: 软件: windows10 pro + EIS11+ 360卫士 BIOS:N1DET98W 2.24 硬件: Xeon E3 1505-V5 nv-M3000M thinkpadP70:20E...

Oh_really
29分钟前
0
0
Git之branch和checkout

1.branch是查看、创建、删除分支 #>git branch --helpNAME git-branch - List, create, or delete branchesSYNOPSIS git branch [--color[=<when>] | --no-color] [......

汉斯-冯-拉特
30分钟前
0
0
Mybatis拦截器之数据权限过滤与分页集成

需求场景 最近项目有个数据权限的业务需求,要求大致为每个单位只能查看本级单位及下属单位的数据,例如:一个集团军下属十二个旅,那么军级用户可以看到所有数据,而每个旅则只能看到本旅部...

佛系程序猿灬
39分钟前
9
0
SpringCloud 微服务 (十六) 服务追踪 Zipkin

问题 在服务中,有一个接口,该A接口中又调用了其他服务的B、C、D接口,出现一个请求耗时大的问题,这时候并不知道该B、C、D接口中哪个接口造成的耗时量,然后比如确定C服务接口出现的耗时量大,但...

___大侠
今天
0
0
Java面试基础篇——第八篇:抽象类与接口的区别

1.抽象类 抽象类:如果一个类中包含有抽象方法,或这个类使用abstract关键字修饰,则称这个类是抽象类。 抽象方法是什么呢?抽象方法就是指用abstract关键字修饰的方法。 需要注意的是:抽象...

developlee的潇洒人生
今天
2
0
jsoup 相关资料

1.jsoup 2.Jsoup概述 3.jsoup入门 4.jsoup Java HTML Parser 1.11.3 API

IT追寻者
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部