示例代码:

<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. 实用TCP协议(1):TCP 协议简介

    传输控制协议(TCP,Transmission Control Protocol)是一种面向连接的.可靠的.基于字节流的传输层通信协议.TCP 协议假设下层协议可以提供简单的不可靠数据报, 并在此基础 ...

  2. js 数组/对象/日期的浅克隆

    //封装 function clone (obj) { // Handle the 3 simple types, and null or undefined if (null == obj || & ...

  3. List分组和排序

    1 //分组 2 var ll= lst.GroupBy(x => new { x.Id, x.Name }).Select(x => new 3 { 4 Key = x.Key, 5 I ...

  4. layui 表单的使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. laravel7 搜索分页

    html: <form action="{{url('http://www.yanbing.com/fang/index')}}" method="get" ...

  6. MySQL-DB-封装-升级版

    <?php class DB { //定义属性 private $host;//主机名 private $port;//端口号 private $name;//用户名 private $pass ...

  7. 8、msyql性能分析工具

    性能分析工具 1服务器优化的步骤 2查询系统参数 在MySQL中,可以使用 SHOW STATUS 语句查询一些MySQL数据库服务器的性能参数.执行频率 . SHOW STATUS语句语法如下: S ...

  8. 使用 AHK 在 VS Code 中根据上下文自动切换输入法状态

    平常在VS Code打公式,中英文切换一直狂点 Shift 手都快按断了,于是试图用 AutoHotKey 搞一些自动切换输入法程序,让它根据当前输入环境自动切输入法. 之前在网上搜到的是切换键盘的( ...

  9. 揭秘.NET Core剪裁器背后的技术

    十天前,我发布了对.NET Core程序进行瘦身的开源软件Zack.DotNetTrimmer,与.NET Core内置的剪裁器相比,Zack.DotNetTrimmer不仅对程序的剪裁效果更好,而且 ...

  10. SSM集成Thymeleaf

    创建项目 Spring+SpringMVC+MyBatis的配置文件 数据库内容 dao层+service层+controller层 映射文件 前端简单页面 配置tomcat,运行显示 总体项目架构 ...