java + typeahead 使用

项目需要在页面上使用提示补全功能，使用了typeahead 插件，由于目前该类型插件有很多，而且名字也都类似，甚至一样，所以很不好从网上找到使用方法，所以记录一下该插件的使用方式，防止以后需要忘记了。

插件下载地址：http://twitter.github.io/typeahead.js/

插件演示地址：http://twitter.github.io/typeahead.js/examples/

插件文档说明（英文）：https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#datasets

自己下载的插件（包含样式）百度盘下载地址：链接: http://pan.baidu.com/s/1boEx0JH 密码: 63a9

该插件提供了2种js文件来使用，一种是typeahead.bundle.js，集成了bundle功能，另一种是typeahead.jquery.js，没有集成bundle功能，需要单独引用相关js.

但是jquery的可以设置一些其他的额外参数，比如设置提示的数量等。我是用的是typeahead.jquery.js。

使用方式：

需要引入的js:

<script src="${ctx}/static/lib/jquery/1.11.3/jquery.min.js"></script>
<script src="${ctx}/static/lib/typeahead/handlebars.js"></script>

<script src="${ctx}/static/lib/typeahead/bloodhound.js"></script>
<script src="${ctx}/static/lib/typeahead/typeahead.jquery.js"></script>

这3个js是必须要引入的，如果需要对显示的内容进行修改，还需要引入一个js:

<script src="${ctx}/static/lib/typeahead/handlebars.js"></script>

页面使用方式：

<input data-provide="typeahead" class="form-control" type="text" placeholder="请输入出发城市..." id="fromairport" name="fromairport" />

由于我使用了bootstrap，所以input 的样式是使用的bootstrap提供的。typeahead 只需要你提供一个input即可。

js:

 //远程数据源
var remote_airports = new Bloodhound({datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),queryTokenizer: Bloodhound.tokenizers.whitespace,// 在文本框输入字符时才发起请求remote: {url:"${ctx}/airport/typeahead?query=%QUERY",wildcard: '%QUERY'}
});$('#fromairport').typeahead({highlight: true
}, {name: 'airport',limit: 100//limit 这里有bug，如果传过来的数据少于limit个，会显示limint-传过来的数量，所以我在这里设置成100,最多传过来20个，这样就会显示20个source: remote_airports,display:'value',templates: {empty: ['<div class="empty-message">','未匹配到相关机场','</div>'].join('\n'),suggestion: Handlebars.compile('<div><strong>{{value}}</strong> – {{name}}</div>')}
});

如果input中需要显示的不止一个value，则需要这样写：

display:function(date){return date.value+" - "+date.name;
},

我使用的是在服务器中去匹配补全数据，所以使用了远程数据源，本地的比较简单直接看官方例子即可。

这里我显示的补全信息做了处理，即在templates中修改的。

java后台生成数据：

package com.shijie99.chartered.manage.controller;import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.util.Map;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import com.shijie99.chartered.manage.config.ConfigTool;
import com.shijie99.chartered.manage.pojo.AirPortInfo;@RestController
@RequestMapping("airport")
public class AirPortController {@Autowiredprivate ConfigTool configTool; /*** 机场自动提示* @param query* @return   * @author wangcf* @date 2016-3-29 下午5:11:21*/@RequestMapping("typeahead")public Object typeahead(String query){Map<String,AirPortInfo> map = configTool.getAirportMap();List<City> list = new ArrayList<City>();Iterator<String> it = map.keySet().iterator();while(it.hasNext()){if(list.size()>=20){break;}String key = it.next();if(key.indexOf(query.toUpperCase())==0){City city = new City();city.setValue(key);city.setName(map.get(key).getAirportName());list.add(city);}}return list;}public class City{private String value;private String name;public String getValue() {return value;}public void setValue(String value) {this.value = value;}public String getName() {return name;}public void setName(String name) {this.name = name;}}
}

public class AirPortInfo {private String airportCode;private String cityCode;private String airportName;private String cityName;public String getAirportCode() {return airportCode;}public void setAirportCode(String airportCode) {this.airportCode = airportCode;}public String getCityCode() {return cityCode;}public void setCityCode(String cityCode) {this.cityCode = cityCode;}public String getAirportName() {return airportName;}public void setAirportName(String airportName) {this.airportName = airportName;}public String getCityName() {return cityName;}public void setCityName(String cityName) {this.cityName = cityName;}@Overridepublic String toString() {return "AirPortInfo [airportCode=" + airportCode + ", cityCode="+ cityCode + ", airportName=" + airportName + ", cityName="+ cityName + "]";}
}

java后台使用的是spring 的mvc，所以返回的数据是一个json数组，格式是这样子的：

[{"value":"ALL1","name":"阿尔班加机场"},{"value":"AQG","name":"安庆天柱山机场"},{"value":"AQJ","name":"侯赛因国王国际机场"
},{"value":"AQI","name":"柴苏马机场"},{"value":"APO","name":"阿帕尔塔多机场"},{"value":"APU","name":"阿普卡拉机场"},{"value"
:"APZ","name":"萨帕拉机场"},{"value":"APW","name":"阿皮亚机场"},{"value":"ARB","name":"安阿伯地方机场"},{"value":"ARC"
,"name":"北极村机场"},{"value":"ARD","name":"阿洛岛机场"},{"value":"ARE","name":"阿雷西沃机场"},{"value":"ARG","name"
:"沃尔纳特里奇机场"},{"value":"ARH","name":"阿尔汉格斯克机场"},{"value":"ARI","name":"查卡鲁塔机场"},{"value":"ARK","name"
:"阿鲁沙机场"},{"value":"ARM","name":"阿米代尔机场"},{"value":"ARN","name":"阿兰达机场"},{"value":"ARP","name":"阿拉吉普
机场"},{"value":"AQP","name":"罗德伊圭兹 挽巴隆机场"}]

显示的结果：

java + typeahead 使用相关推荐

typeahead有什么作用_typeahead使用配置参数。
示例代码: var suggestion_source = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace( ...
Java源码 JavaWeb开发框架代码 SSH SSM OA ERP CRM Java项目[Java通用框架源码及开发视频教程]
Java源码 JavaWeb开发框架代码 SSH SSM OA ERP CRM Java项目功能简介: A.代码生成器(开发利器) 生成Java各层次的类和JSP等文件,提高开发效率 B.阿里巴巴 ...
Java常用类库以及简介，具体使用细节进行百度（爬虫爬取的数据）
来至于互联网 Office文档的Java处理包 POI [推荐] Apache POI是一个开源的Java读写Excel.WORD等微软OLE2组件文档的项目.目前POI已经有了Ruby版本. 结构: ...
springboot实现SSE服务端主动向客户端推送数据，java服务端向客户端推送数据，kotlin模拟客户端向服务端推送数据
SSE服务端推送服务器向浏览器推送信息,除了 WebSocket,还有一种方法:Server-Sent Events(以下简称 SSE).本文介绍它的用法. 在很多业务场景中,会涉及到服务端向客户端 ...
Java 获取当前时间之后的第一个周几，java获取当前日期的下一个周几
Java 获取当前时间之后的第一个周几,java获取当前日期的下一个周几 //获得入参的日期 Calendar cd = Calendar.getInstance(); cd.setTime(date ...
在k8s中使用gradle构建java web项目镜像Dockerfile
在k8s中使用gradle构建java web项目镜像Dockerfile FROM gradle:6-jdk8 AS build COPY --chown=gradle:gradle . /home ...
Java | kotlin 手动注入bean，解决lateinit property loginService has not been initialized异常
kotlin.UninitializedPropertyAccessException: lateinit property loginService has not been initialized ...
SpringBoot项目使用nacos，kotlin使用nacos，java项目使用nacos，gradle项目使用nacos，maven项目使用nacos
SpringBoot项目使用nacos kotlin demo见Gitte 一.引入依赖提示:这里推荐使用2.2.3版本,springboot与nacos的依赖需要版本相同,否则会报错. maven ...
OpenAPI使用（swagger3），Kotlin使用swagger3，Java使用swagger3，gradle、Maven使用swagger3
OpenAPI使用(swagger3) demo见Gitte 一.背景及名词解释 OpenAPI是规范的正式名称.规范的开发工作于2015年启动,当时SmartBear(负责Swagger工具开发的公 ...

java + typeahead 使用

java + typeahead 使用相关推荐

最新文章

热门文章