示例代码:

<input type="text" id="addr"/>
<input type="text" hidden id="lat"/>
<input type="text" hidden id="lon"/>
API:http://wiki.openstreetmap.org/wiki/Nominatim
需求:通过输入地名自动补全地址信息,选择提示信息后,讲地址经纬度附值给隐藏的input,后提交表单。
var suggestion_source  = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace("display_name"),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: "http://nominatim.openstreetmap.org/search?format=json&q=%QUERY",
wildcard: '%QUERY',
transform:function(response){
return response;
}
}
}); $('#addr').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
source: suggestion_source,
display:function(item){
return item.display_name;
},
templates: {
suggestion: function (data) {
return '<p style="text-align: left">' + data.display_name + '</p>';
}
}
}); $('#addr').bind('typeahead:select', function(ev, suggestion) {
$('#lat').val((suggestion.lat));
$('#lon').val((suggestion.lon));
});
$('#referred').click(function () {
var lat = $('#lat').val();
var lon = $('#lon').val();
var name = $('#name').val();
var address = $('#addr').val();
if(name==''||address==''){
$.toast({
text:'请补全信息!',
icon:'error'
})
}
else {
$.ajax({
url:url+'abc',
type:'post',
dataType:'json',
contentType:'application/json',
data:JSON.stringify({
name:name,
address:address,
latitude:lat,
longitude:lon
}),
success:function () {
$.toast({
text:'新建地址成功!',
icon:'success'
})
},
error:function () {
$.toast({
text:'新建地址失败!',
icon:'error'
})
}
})
} });

默认的display就好,不需要去覆盖

source是配置typehead的数据源

Bloodhound.tokenizers.obj.whitespace("city"),这个稍稍复杂一点,.whitespace("xxx")这个是指取"xxx"这个属性,进行空白分词,以便查询.

比如返回的json,有一个属性叫city,如果有一个具体的city="New York",那么进行了Bloodhound.tokenizers.obj.whitespace("city")之后,无论用户输入New或者York,都能查到,而不用考虑空格.

datumTokenizer: Bloodhound.tokenizers.obj.whitespace("display_name"),
queryTokenizer: Bloodhound.tokenizers.whitespace,有两个这个参数.

datumTokenizer是针对返回结果集的,
queryToken是针对查询参数的.

template是定义每一行option的显示效果的.

transform:对数据格式做转化,如果有需要的话,比如把服务器的某个字段名改掉,或者某个字段进行数学计算

使用Bootstrap typeahead插件实现搜索框自动补全的配置参数。的更多相关文章

  1. jQuery搜索框自动补全功能插件实现-autocomplete.js

    最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...

  2. 第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能

    第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—用Django实现搜索的自动补全功能 elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.e ...

  3. 四十七 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能

    elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.elastic.co/guide/en/elasticsearch/reference/current/se ...

  4. 去掉input密码框自动补全功能

    <input name="password" autocomplete="off" hidden> <input type="pas ...

  5. bootstrap-typeahead 自动补全简单的使用教程

    参考链接: 参考1 : https://segmentfault.com/a/1190000006036166参考2 : https://blog.csdn.net/u010174173/articl ...

  6. autocomplete实现联想输入,自动补全

    jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...

  7. bigautocomplete实现联想输入,自动补全

    bigautocomplete是一款Jquery插件.用它实现仿搜索引擎文本框自动补全插件功能很实用,使用也很简单,引入了插件之后写几行代码就可以实现,可以灵活设置. 先看效果图: 上图是通过ajax ...

  8. ES系列十三、Elasticsearch Suggester API(自动补全)

    1.概念 1.补全api主要分为四类 Term Suggester(纠错补全,输入错误的情况下补全正确的单词) Phrase Suggester(自动补全短语,输入一个单词补全整个短语) Comple ...

  9. 第一百八十一节,jQuery-UI,知问前端--自动补全 UI--邮箱自动补全

    jQuery-UI,知问前端--自动补全 UI--邮箱自动补全 学习要点: 1.调用 autocomplete()方法 2.修改 autocomplete()样式 3.autocomplete()方法 ...

随机推荐

  1. Maven插件mybatis-generator,如何让生成的PO类的field上有对应表字段的注释

    前言 去年刚入职的时候,我就发现,po类(和数据库表对应的类)上,一片都是光秃秃的,什么注释都没有,类上没注释,field上也没注释. 在以前的项目中,其实我们都是有生成注释的,比如,对于下面这个表: ...

  2. 简单实现一个快速传输电子书到kindle的小项目

    前言 最近翻出来好久没有看的kindle,准备继续我的阅读之路.当然,也是因为发现了一个非常好的获取电子书资源的网站,又燃起了我的阅读兴趣. 然而,往kindle里传输电子书的方式一共有四种: 直接在 ...

  3. 【架构】从instagram学习最小化IT是怎么做的

    Keep it very simple (极简主义) Don't re-invent the wheel (不重复发明轮子) Go with proven and solid technologies ...

  4. Laravel-Auth认证

    1.建立数据表 admins 2.找到config下的auth.php 文件,加入如下代码 <?php return [ /* |-------------------------------- ...

  5. cookie与session(全面了解)

    目录 一:cookie与session 1.什么是Cookie? 2.Cookie主要用于以下三个方面 3.什么是Session? 4.Cookie与Session有什么不同? 5.为什么需要Cook ...

  6. CF1392F题解

    首先题意很明显就不说了吧www 先说一下做这道题的经历 昨天下午和 blw 一起去食堂吃饭,和他产生了一点儿冲突,于是我考了一下他 P1119 (就是那道 Floyd),他很快做出来了,于是考了我这道 ...

  7. 命令行安装django以及新建项目及应用

    1:安装django项目,使用pip命令进行安装,默认安装的是最高版本,可以使用pip install django==1.1.11进行指定版本安装 2:新建django项目 2.1:首先切换到创建项 ...

  8. vue中使用keepAlice的各种问题

    项目需求:从项目列表页index,进入到列表的详情页detail,再从detail返回到index,需要缓存index的数据 在App.vue中的配置 <template> <div ...

  9. Python IO文件管理

    文件操作 我们可以使用python来操作文件,比如读取文件内容.写入新的内容等,因为任何计算机文件的本质都是一些有不同后缀的字符组成的. python文件操作的两种模式 打开模式 while,写入模式 ...

  10. java 实现装饰器设计模式

    package com.gylhaut.base; /** * 装饰器 * 类与类之间的关系 * 1.依赖:形参(局部变量) * 2.关联:属性 * 聚合 属性 整体和部分 不一致的生命周期 人和手 ...