Вопрос по jquery, twitter-bootstrap, ajax, json – Ajax вызывает заполнение Typeahead Bootstrap

16

То, что я пытаюсь сделать, - это получить объект json через Ajax и заполнить заголовок Bootstrap Typeahead только одним типом значения.

Вот мой код:

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

Я получаю сообщение об ошибкеarr is null

Я тоже пробовал с.parseJSON() но безуспешно

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

Что я могу сделать, чтобы показать только значение Имя моего объекта Json в Typeahed?

Если в Ajax Success я ставлюalert(JSON.stringify(data)); это предупреждает правильно мой объект Json.

success обратному вызову не нужно ничего возвращать, будь то асинхронный вызов - проверьтеthis example instead. moonwave99
Также если я удалюreturn arr; это не работает ... Ayeye Brazo
По вашей ссылке я не могу понять CoffeeScript. Где я должен объявитьproperty: "name" Ayeye Brazo

Ваш Ответ

3   ответа
7

Оформить заказ Имеет автозаполнение, имеет дело с быстрыми печатными машинками и кеширует

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

Придумал собственное решение для этого, но не было так здорово, и я был недоволен этим. Этот хороший и простой. - Заметьте, что для других вам нужно добавить или сделать что-нибудь, просто скопируйте код, измените URL своегоgetJSON, Работает из коробки.
Это должен быть принятый ответ. Гораздо сложнее и эффективнее. Спасибо за суть!
Спасибо, рад, что тебе понравилось. Есть несколько хороших форков этого вопроса.
1

Вот что сработало для меня:

HTML Setup :

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

References:

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

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

Удачи.

33

Я сделал это с нуля:

$('#typeahead').typeahead({

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

});

кудаdata простой массив JSON, такой как:

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

Если твойdata массив имеет другую структуру, просто переставьте его перед передачейprocess() метод.

Вы можете найти живой примерВот.

РЕДАКТИРОВАТЬ - на основе ваших данных JSON:

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

getJSON обратный вызов становится:

function (data) {

    var newData = [];

    $.each(data, function(){

        newData.push(this.name);

    });

    return process(newData);

}); 
и мой консольный журнал говорит: TypeError: typeahead.process не является функцией Ayeye Brazo
Ну, вы спрашиваете у своего сервера материал, основанный на том, что вы печатаете -query строка.
только один вопрос, почему я должен добавить в URL+query ?!? Ayeye Brazo
Я уже получаю строку из метода. Ayeye Brazo
Отличный ответ. Но ты должен написатьprocess(data); return; вместоreturn process(data);

Похожие вопросы