使用Bootstrap typeahead插件实现搜索框自动补全的配置参数。
示例代码:
<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插件实现搜索框自动补全的配置参数。的更多相关文章
- jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...
- 第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能
第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—用Django实现搜索的自动补全功能 elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.e ...
- 四十七 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能
elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.elastic.co/guide/en/elasticsearch/reference/current/se ...
- 去掉input密码框自动补全功能
<input name="password" autocomplete="off" hidden> <input type="pas ...
- bootstrap-typeahead 自动补全简单的使用教程
参考链接: 参考1 : https://segmentfault.com/a/1190000006036166参考2 : https://blog.csdn.net/u010174173/articl ...
- autocomplete实现联想输入,自动补全
jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...
- bigautocomplete实现联想输入,自动补全
bigautocomplete是一款Jquery插件.用它实现仿搜索引擎文本框自动补全插件功能很实用,使用也很简单,引入了插件之后写几行代码就可以实现,可以灵活设置. 先看效果图: 上图是通过ajax ...
- ES系列十三、Elasticsearch Suggester API(自动补全)
1.概念 1.补全api主要分为四类 Term Suggester(纠错补全,输入错误的情况下补全正确的单词) Phrase Suggester(自动补全短语,输入一个单词补全整个短语) Comple ...
- 第一百八十一节,jQuery-UI,知问前端--自动补全 UI--邮箱自动补全
jQuery-UI,知问前端--自动补全 UI--邮箱自动补全 学习要点: 1.调用 autocomplete()方法 2.修改 autocomplete()样式 3.autocomplete()方法 ...
随机推荐
- 实用TCP协议(1):TCP 协议简介
传输控制协议(TCP,Transmission Control Protocol)是一种面向连接的.可靠的.基于字节流的传输层通信协议.TCP 协议假设下层协议可以提供简单的不可靠数据报, 并在此基础 ...
- js 数组/对象/日期的浅克隆
//封装 function clone (obj) { // Handle the 3 simple types, and null or undefined if (null == obj || & ...
- List分组和排序
1 //分组 2 var ll= lst.GroupBy(x => new { x.Id, x.Name }).Select(x => new 3 { 4 Key = x.Key, 5 I ...
- layui 表单的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- laravel7 搜索分页
html: <form action="{{url('http://www.yanbing.com/fang/index')}}" method="get" ...
- MySQL-DB-封装-升级版
<?php class DB { //定义属性 private $host;//主机名 private $port;//端口号 private $name;//用户名 private $pass ...
- 8、msyql性能分析工具
性能分析工具 1服务器优化的步骤 2查询系统参数 在MySQL中,可以使用 SHOW STATUS 语句查询一些MySQL数据库服务器的性能参数.执行频率 . SHOW STATUS语句语法如下: S ...
- 使用 AHK 在 VS Code 中根据上下文自动切换输入法状态
平常在VS Code打公式,中英文切换一直狂点 Shift 手都快按断了,于是试图用 AutoHotKey 搞一些自动切换输入法程序,让它根据当前输入环境自动切输入法. 之前在网上搜到的是切换键盘的( ...
- 揭秘.NET Core剪裁器背后的技术
十天前,我发布了对.NET Core程序进行瘦身的开源软件Zack.DotNetTrimmer,与.NET Core内置的剪裁器相比,Zack.DotNetTrimmer不仅对程序的剪裁效果更好,而且 ...
- SSM集成Thymeleaf
创建项目 Spring+SpringMVC+MyBatis的配置文件 数据库内容 dao层+service层+controller层 映射文件 前端简单页面 配置tomcat,运行显示 总体项目架构 ...