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 {        @Autowired    private 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":"罗德伊圭兹 挽巴隆机场"}]

显示的结果：