Twitter Typehead.JS - 带有 AJAX 调用的自定义 div

Question

我想创建一个带有 AJAX 调用的自定义 typehead.JS。

那么，我做了什么-

JS-

$(document).ready(function()
{
    var data = {
            "places":[
                {
                "value":"Abal",
                "image":"http://lorempixel.com/100/100/transport/",
                "description":"Abal Car",
                "label":"an Abal"
                },
                {
                "value":"Audi",
                "image":"http://lorempixel.com/100/100/transport/",
                "description":"Audi car",
                "label":"an Audi"
                },
                {
                "value":"BMW",
                "image":"http://lorempixel.com/100/100/transport/",
                "description":"BMW car",
                "label":"a BMW"
                },
                {
                "value":"Bugatti",
                "image":"http://lorempixel.com/100/100/transport/",
                "description":"Bugatti car",
                "label":"a Bugatti"
                },
                {
                "value":"Ferrari",
                "image":"http://lorempixel.com/100/100/transport/",
                "description":"Ferrari car",
                "label":"a Ferrari"
                }
                ,{
                "value":"Ford",
                "image":"http://lorempixel.com/100/100/transport/",
                "description":"Ford car",
                "label":"a Ford"
                },
                {
                "value":"Lamborghini",
                "image":"http://lorempixel.com/100/100/transport/",
                "description":"Lamborghini car",
                "label":"a Lamborghini"
                },
                {
                "value":"Mercedes Benz",
                "image":"http://lorempixel.com/100/100/transport/",
                "description":"Mercedes Benz",
                "label":"a Mercedes Benz"
                }
                ,{
                "value":"Porsche",
                "image":"http://lorempixel.com/100/100/transport/",
                "description":"Porsche car",
                "label":"a Porsche"
                }
                ,{
                "value":"Rolls-Royce",
                "image":"http://lorempixel.com/100/100/transport/",
                "description":"Rolls-Royce car",
                "label":"a Rolls-Royce"
                }
                ,{
                "value":"Volkswagen",
                "image":"http://lorempixel.com/100/100/transport/",
                "description":"Volkswagen car",
                "label":"a Volkswagen"
                }
            ]
        };


    var suggestions = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: $.map(data.places, function(d) {
        return {value:d.value, suggest:d}
        })
    });

    suggestions.initialize();


    $("#typehead").typeahead(
    {
        minLength: 1,
        hint: true,
        highlight: true
    },
    {
        name: "suggestions",
        displayKey: "value",
        templates: {
                        suggestion: function(data)
                        {
                        //End - Update the data*************************************************************************************************************************************************
                            console.log(data);
                            var details =
                                '<div class=resultContainer>'
                                +data.value
                                +'<div class=resultImage><img src='
                                +data.suggest.image+' /></div><div class=resultDesc>'
                                +data.suggest.description
                                +'</div><div class=resultLabel>'
                                +data.suggest.label
                                +'</div></div>';
                            return details;
                        }
                    },
        source: suggestions.ttAdapter()
    });
});

还有 HTML-

<div>
    <input type="text" id="typehead"  class="form-control input_black_background slider_top_seperator" name="desired_place" value="" placeholder="Address or City">
</div>

所以我得到的是这样的-

但数据不是来自 AJAX，而是来自本地。

但我希望它是 ajax 数据。

有什么解决办法吗？ 我已经在很多地方搜索了很多次的解决方案，但找不到解决方案。

提前感谢您的帮助。

Answer 1

如果您想通过 Ajax 调用获取此数据，您需要一个 URL，该 URL 将在您的服务器上响应这些数据。例如：GET /places

一旦您知道获取这些数据所需的 URL，您就可以创建对该 URL 的 Ajax 调用。 然后，您将使用请求的响应，而不是使用本地数据对象。

$( "#typehead" ).change(function() {
    $.get({
        method: 'get',
        url: '/places' //replace with your real URL
}).success(function (data) {
    var suggestions = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: $.map(data.places, function(d) {
            return {value:d.value, suggest:d}
        })
    });

    suggestions.initialize();


    $("#typehead").typeahead(
        {
            minLength: 1,
            hint: true,
            highlight: true
        },
        {
            name: "suggestions",
            displayKey: "value",
            templates: {
                suggestion: function(data)
                {
                    //End - Update the data*************************************************************************************************************************************************
                    console.log(data);
                    var details =
                        '<div class=resultContainer>'
                        +data.value
                        +'<div class=resultImage><img src='
                        +data.suggest.image+' /></div><div class=resultDesc>'
                        +data.suggest.description
                        +'</div><div class=resultLabel>'
                        +data.suggest.label
                        +'</div></div>';
                    return details;
                }
            },
            source: suggestions.ttAdapter()
        });
})

};

Answer 2

首先你的问题是模棱两可的，只需在模板对象中使用 $.getJSON()