简体   繁体   English

Ajax调用填充Typeahead Bootstrap

[英]Ajax call populate Typeahead Bootstrap

What I'm trying to do is to get a json object via Ajax and populate the Bootstrap Typeahead with just one kind of value. 我想要做的是通过Ajax获取一个json对象,并使用一种值填充Bootstrap Typeahead。

Here is my code: 这是我的代码:

nameTypeHead: function () {
        var _self = this,
            searchInput = $('#nameTypeHead'),
            arr = [];

        function getArray() {
            $.ajax({
                url: '/Home/AutoComplete',
                type: 'post',
                dataType: 'json',
                data: { searchText: searchInput.val() },
                success: function (data) {
                    $.each(data, function () {
                        arr.push(this.Name);
                    });
                    return arr;
                }
            });
        }

        searchInput.typeahead({
            source: getArray()
        });
    } 

I receive the error that arr is null 我收到arr为null的错误

I also tried with .parseJSON() but with no success: 我也试过.parseJSON()但没有成功:

$.each($.parseJSON(data), function () {
   arr.push(this.Name);
});

What can I do to show just the value Name of my Json Object in the Typeahed? 我该怎么做才能在Typeahed中显示我的Json对象的值Name?

If in the Ajax Success I put alert(JSON.stringify(data)); 如果在Ajax Success中我放了alert(JSON.stringify(data)); it alert correctly my Json Object. 它正确地警告我的Json对象。

I made it from scratch: 我是从头开始做的:

$('#typeahead').typeahead({

    source: function (query, process) {
        return $.getJSON(
            'path/to/lookup',
            { query: query },
            function (data) {
                return process(data);
            });
    }

});

Where data is a simple JSON array like: data是一个简单的JSON数组,如:

 [
   "John",
   "Jane",
   "Alfredo",
   "Giovanni",
   "Superman"
 ]

If your data array has got a different structure, just rearrange it before passing it to process() method. 如果您的data数组具有不同的结构,只需在将其传递给process()方法之前重新排列它。

You can find a live example here . 你可以在这里找到一个实例。

EDIT - based on your json data: 编辑 - 基于您的json数据:

[
    {'id':'0', 'name':'John'},
    {'id':'1', 'name':'Jane'}, 
    {'id':'2', 'name':'Alfredo'},
    ...
}

The getJSON callback becomes: getJSON回调变为:

function (data) {

    var newData = [];

    $.each(data, function(){

        newData.push(this.name);

    });

    return process(newData);

}); 

Checkout this gist. 查看这个要点。 Does autocomplete, deals with fast typers, and caches 是否自动完成,处理快速打字机和缓存

https://gist.github.com/mrgcohen/5062352 https://gist.github.com/mrgcohen/5062352

This is what worked for me:- 这对我有用: -

HTML Setup : HTML设置:

<!-- HTML Setup-->
<input type="text" id="my-typeahead" />

Javascript : Javascript:

/* 
example remote-data-source
[
  {
    id:1,
    name:'Batman'
  },{
    id:2,
    name:'Superman'
  } 
]
*/

$('#my-typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
}, {
    name: 'myDataset',
    source: function(str, sync, async) {
        // abstracting out the "REST call and processing" in a seperate function
        restCall(str, async);
    },
    templates: {
        suggestion: function(user) {
            return '<div>' + user.name + '</div>';
        },
        pending: '<div>Please wait...</div>'
    }
});

// The function that will make the REST call and return the data
function restCall(str, async) {
    return $.ajax('http://url-for-remote-data-source/query?name=' + str, {
        // headers and other setting you wish to set-up
        headers: {
            'Content-Type': 'application/json',
        },
        // response
        success: function(res) {
            //processing data on response with 'async'
            return async(res.data);
        }
    });
}

References: 参考文献:

Typeahead Docs - Datasets : https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#datasets Typeahead Docs - Datasetshttps//github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#datasets

Jquery **$.ajax()** : https://api.jquery.com/jquery.ajax/ Jquery **$.ajax()**https//api.jquery.com/jquery.ajax/

Good Luck. 祝好运。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM