使用Bootstrap typeahead插件实现搜索框自动补全的配置参数。

JerryC 发布于2019-08-20 12:24 / 1556人阅读

摘要：示例代码需求通过输入地名自动补全地址信息，选择提示信息后，讲地址经纬度附值给隐藏的，后提交表单。

示例代码：




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输入框自动补全百度地图搜索框实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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