web-dev-qa-db-fra.com

Appel Ajax peupler Typeahead Bootstrap

Ce que j'essaie de faire est d'obtenir un objet json via Ajax et de renseigner le type de tête Bootstrap avec un seul type de valeur.

Voici mon 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()
        });
    }

Je reçois l'erreur que arr est null

J'ai aussi essayé avec .parseJSON() mais sans succès:

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

Que puis-je faire pour afficher uniquement la valeur Nom de mon objet Json dans le Typeahed?

Si dans Ajax Success, je mets alert(JSON.stringify(data));, il alerte correctement mon objet Json.

jqueryajaxjsontwitter-bootstrap
16
Ayeye Brazo

Je l'ai fait à partir de zéro:

$('#typeahead').typeahead({

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

});

Où data est un tableau JSON simple du type:

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

Si votre tableau data a une structure différente, il suffit de le réorganiser avant de le transmettre à la méthode process().

Vous pouvez trouver un exemple en direct ici .

EDIT - basé sur vos données json:

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

Le callback getJSON devient:

function (data) {

    var newData = [];

    $.each(data, function(){

        newData.Push(this.name);

    });

    return process(newData);

});
33
moonwave99

Commander ce Gist. Effectue la saisie semi-automatique, traite les dactylographes rapides et met en cache

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

7
mc.

C'est ce qui a fonctionné pour moi:-

Configuration HTML:

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

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

Références:

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

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

Bonne chance.

1
Akash