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