使用Bootstrap typeahead插件實現搜索框自動補全的配置參數。

JerryC 發布于2019-08-20 12:24 / 1591人閱讀

摘要：示例代碼需求通過輸入地名自動補全地址信息，選擇提示信息后，講地址經緯度附值給隱藏的，后提交表單。

示例代碼：




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 "" + 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的數據源

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:對數據格式做轉化，如果有需要的話,比如把服務器的某個字段名改掉，或者某個字段進行數學計算

GPU云服務器云服務器自動補全插件 php搜索自動補全 asp輸入框自動補全百度地圖搜索框實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80966.html

typeahead.js 使用教程小結

摘要：規定查詢時要顯示的條目的最大值。用于自動高亮突出顯示結果。其值可以是關鍵字符串，或者是將推薦對象轉換為的函數。默認為移除功能，并將元素的狀態重置為原始狀態。關閉的下拉菜單。實屬原創，如有錯誤，煩請指教前言：最近有個輸入框自動補全的需求，例如百度搜索功能： showImg(https://segmentfault.com/img/bVzusL); 在輸入框輸入信息后，自動提示補全。我選...

changfeng1050 2019-08-21 10:55 評論0 收藏0
67 個拯救前端開發者的工具、庫和資源

摘要：庫一個用來在中創建炫酷的浮動粒子的庫一個用來在中創建物體和空間的庫快速實現全屏滾動特性打字機效果滾動到某個元素位置時觸發一個功能語法高亮使用創建漂亮的圖表能夠明顯加速網站加載時間，鼠標時預加載資源另一個圖表庫一個基于動畫和平移的雪碧圖庫實現 Javascript 庫 Particles.js? 一個用來在 web 中創建炫酷的浮動粒子的庫 Three.js? 一個用來在 web 中創...

XiNGRZ 2019-08-22 16:00 評論0 收藏0
Sublime text 前端開發插件安裝和配置

摘要：前端開發配置此文件目錄中文件主要是關于的插件配置，快捷鍵配置，主題和字體配置。插件列表所有插件都可以使用安裝，具體的安裝方法可以自行谷歌安裝，不在本文的介紹范圍之內。這兩個插件主要是平時使用或者是這些預編譯語言有用，支持語法高亮。前端開發sublimeconfig mac配置此文件目錄中文件主要是關于sublime的插件配置，快捷鍵配置，主題和字體配置。插件列表所有插件都可以使...

glumes 2019-08-19 17:20 評論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評論0 收藏0