資訊專欄INFORMATION COLUMN
摘要：示例代碼需求通過(guò)輸入地名自動(dòng)補(bǔ)全地址信息，選擇提示信息后，講地址經(jīng)緯度附值給隱藏的，后提交表單。
示例代碼：
API:http://wiki.openstreetmap.org/wiki/Nominatim 需求：通過(guò)輸入地名自動(dòng)補(bǔ)全地址信息，選擇提示信息后，講地址經(jīng)緯度附值給隱藏的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 "" + data.display_name + "
";
}
}
});
$("#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:"請(qǐng)補(bǔ)全信息！",
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"
})
}
})
}
});
默認(rèn)的display就好，不需要去覆蓋
source是配置typehead的數(shù)據(jù)源
Bloodhound.tokenizers.obj.whitespace("city")，這個(gè)稍稍復(fù)雜一點(diǎn),.whitespace("xxx")這個(gè)是指取"xxx"這個(gè)屬性，進(jìn)行空白分詞，以便查詢.
比如返回的json，有一個(gè)屬性叫city，如果有一個(gè)具體的city="New York"，那么進(jìn)行了Bloodhound.tokenizers.obj.whitespace("city")之后，無(wú)論用戶輸入New或者York，都能查到，而不用考慮空格.
datumTokenizer: Bloodhound.tokenizers.obj.whitespace("display_name"),
queryTokenizer: Bloodhound.tokenizers.whitespace,有兩個(gè)這個(gè)參數(shù).
datumTokenizer是針對(duì)返回結(jié)果集的，
queryToken是針對(duì)查詢參數(shù)的.
template是定義每一行option的顯示效果的.
transform:對(duì)數(shù)據(jù)格式做轉(zhuǎn)化，如果有需要的話,比如把服務(wù)器的某個(gè)字段名改掉，或者某個(gè)字段進(jìn)行數(shù)學(xué)計(jì)算
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/80966.html
摘要：規(guī)定查詢時(shí)要顯示的條目的最大值。用于自動(dòng)高亮突出顯示結(jié)果。其值可以是關(guān)鍵字符串，或者是將推薦對(duì)象轉(zhuǎn)換為的函數(shù)。默認(rèn)為移除功能，并將元素的狀態(tài)重置為原始狀態(tài)。關(guān)閉的下拉菜單。實(shí)屬原創(chuàng)，如有錯(cuò)誤，煩請(qǐng)指教 前言：最近有個(gè)輸入框自動(dòng)補(bǔ)全的需求，例如百度搜索功能： showImg(https://segmentfault.com/img/bVzusL); 在輸入框輸入信息后，自動(dòng)提示補(bǔ)全。我選...
摘要：庫(kù)一個(gè)用來(lái)在中創(chuàng)建炫酷的浮動(dòng)粒子的庫(kù)一個(gè)用來(lái)在中創(chuàng)建物體和空間的庫(kù)快速實(shí)現(xiàn)全屏滾動(dòng)特性打字機(jī)效果滾動(dòng)到某個(gè)元素位置時(shí)觸發(fā)一個(gè)功能語(yǔ)法高亮使用創(chuàng)建漂亮的圖表能夠明顯加速網(wǎng)站加載時(shí)間，鼠標(biāo)時(shí)預(yù)加載資源另一個(gè)圖表庫(kù)一個(gè)基于動(dòng)畫和平移的雪碧圖庫(kù)實(shí)現(xiàn) Javascript 庫(kù) Particles.js? 一個(gè)用來(lái)在 web 中創(chuàng)建炫酷的浮動(dòng)粒子的庫(kù) Three.js? 一個(gè)用來(lái)在 web 中創(chuàng)...
摘要：前端開(kāi)發(fā)配置此文件目錄中文件主要是關(guān)于的插件配置，快捷鍵配置，主題和字體配置。插件列表所有插件都可以使用安裝，具體的安裝方法可以自行谷歌安裝，不在本文的介紹范圍之內(nèi)。這兩個(gè)插件主要是平時(shí)使用或者是這些預(yù)編譯語(yǔ)言有用，支持語(yǔ)法高亮。 前端開(kāi)發(fā)sublimeconfig mac配置 此文件目錄中文件主要是關(guān)于sublime的插件配置，快捷鍵配置，主題和字體配置。 插件列表 所有插件都可以使...
摘要：轉(zhuǎn)載來(lái)源包管理器管理著庫(kù)，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個(gè)整合和的最佳思想，使開(kāi)發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。 轉(zhuǎn)載來(lái)源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫(kù)，并提供讀取和打包它們的工具。?npm – npm 是 javasc...
閱讀 2408·2021-11-24 09:39
閱讀 3122·2021-10-15 09:39
閱讀 3179·2021-07-26 23:38
閱讀 2366·2019-08-30 11:14
閱讀 3467·2019-08-29 16:39
閱讀 1765·2019-08-29 15:23
閱讀 867·2019-08-29 13:01
閱讀 2731·2019-08-29 12:29
