Ajax call populate 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.
Here is my code:
nameTypeHead: function () {
var _self = this,
searchInput = $(‘#nameTypeHead’),
arr = [];

function getArray() {
url: ‘/Home/AutoComplete’,
type: ‘post’,
dataType: ‘json’,
data: { searchText: searchInput.val() },
success: function (data) {
$.each(data, function () {
return arr;

source: getArray()

I receive the error that arr is null
I also tried with .parseJSON() but with no success:
$.each($.parseJSON(data), function () {

What can I do to show just the value Name of my Json Object in the Typeahed?
If in the Ajax Success I put alert(JSON.stringify(data)); it alert correctly my Json Object.


Solution 1:

I made it from scratch:


    source: function (query, process) {
        return $.getJSON(
            { query: query },
            function (data) {
                return process(data);


Where data is a simple JSON array like:


If your data array has got a different structure, just rearrange it before passing it to process() method.

Related:  bootstrap 4, cursor doesn't change when hovering over a button but does on anchors

You can find a live example here.

EDIT – based on your json data:

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

The getJSON callback becomes:

function (data) {

    var newData = [];

    $.each(data, function(){



    return process(newData);


Solution 2:

Checkout this gist. Does autocomplete, deals with fast typers, and caches


Solution 3:

This is what worked for me:-

HTML Setup :

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

Javascript :

example remote-data-source

    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);


Related:  How to jump to a specific item in Bootstrap's Carousel?

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

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

Good Luck.