使用Typeahead在json文件中搜索数据

时间:2019-04-01 09:42:46

标签: javascript typeahead.js

大家好,我是typeahead插件中的新手。 但是就是这种情况。 一旦我在文本框中输入一个位置。 在搜索内容之前,它将首先加载places.json。 加载places.json花了4秒钟,然后搜索大约需要60-90ms。

但是我想减少它。我想先加载places.json文件。 为了使在文本框中的位置搜索为60-90ms。

这是我的代码:

$.typeahead({

input: '#input_searchHotel',
maxItem: 10,
order: "asc",
hint: true,
cache: false, 
mustSelectItem: true,
backdrop: {

    "background-color": "#fff"

},
emptyTemplate: 'No result for "{{query}}"',
template: ''+
    '<div class="hotel-search-select" data-api="{{ap}}" data-hotel-code="{{htlcd}}" data-destination="{{cty}}{{htl}}, {{cntry}}" data-type="{{typ}}">'+
        '<div class="beer-card__name">'+
            '{{cty}} {{cntry}}{{htl}}'+
        '</div>'+
    '</div>',
correlativeTemplate: true, 
searchOnFocus: true, 
source: {

    ajax: {

        url: "/json/v1.json",
        path: "data",
        dataType : "json"

    }

}, 
callback: {

    onClickAfter: function (node, a, item, event) {

        event.preventDefault();

        var api = item.ap;
        var hotelCode = item.htlcd;
        var destination = item.cty +", "+ item.cntry;
        var type = item.typ;

        var $input_hotelApi = $("body").find("#input_hotelApi");
        var $input_hotelCode = $("body").find("#input_hotelCode");
        var $input_destination = $("body").find("#input_destination");
        var $input_type = $("body").find("#input_type");

        $input_hotelApi.val();
        $input_hotelCode.val();
        $input_destination.val();
        $input_type.val();

        if(api !== undefined) {

            $input_hotelApi.val(api);

        }

        if(hotelCode !== undefined) {

            $input_hotelCode.val(hotelCode);

        }

        if(destination !== undefined) {

            $input_destination.val(destination);

        }

        if(type !== undefined) {

            $input_type.val(type);

        }

    }

}, 
debug: true

});

0 个答案:

没有答案