twitter bootstrap typeahead 2.0.4 ошибка ajax

У меня есть следующий код, который определенно возвращает правильный результат данных, если я использую версию 2.0.0, но по какой-то причине плагин bootstrap typeahead выдает мне ошибку. Я вставил его ниже образца кода:

<input id="test" type="text" />

$('#test').typeahead({
    source: function(typeahead, query) {
        return $.post('/Profile/searchFor', { query: query }, function(data) {                
            return typeahead.process(data);
        });
    }
});

Когда я запускаю этот пример, я получаю ошибку jQuery, которая говорит следующее:

**
item is undefined
matcher(item=undefined)bootst...head.js (line 104)
<br/>(?)(item=undefined)bootst...head.js (line 91)
<br/>f(a=function(), b=function(), c=false)jquery....min.js (line 2)
<br/>lookup(event=undefined)bootst...head.js (line 90)
<br/>keyup(e=Object { originalEvent=Event keyup, type="keyup", timeStamp=145718131, more...})bootst...head.js (line 198)
<br/>f()jquery....min.js (line 2)
<br/>add(c=Object { originalEvent=Event keyup, type="keyup", timeStamp=145718131, <br/>more...})jquery....min.js (line 3)
<br/>add(a=keyup charCode=0, keyCode=70)jquery....min.js (line 3)
<br/>[Break On This Error]  
<br/>return item.toLowerCase().indexOf(this.query.toLowerCase())**

Есть предположения? ... Тот же код работает в версии плагина 2.0.0, но не может записать в мою нокаутирующую объектную модель.

ЭТО РАБОТАЮЩИЙ КОД ДЛЯ ВЕРСИИ 2.0.0:

var searchFunction = function(typeahead, query) {
        $.ajax({
            url: "/Profile/searchFor?tableName=" + tableName + "&query=" + query + "&extendedData=" + $("#" + extendedData).val(),
            success: function(data) {
                if (data.errorText != null) {
                    toggleLoading("false");
                    showDialog(data.errorText, "Error");
                    return;
                }                
                var result = data.results.split("::");
                typeahead.process(result);
            },
            select: function(event, ui) {
            }
        });
    }

    $("#" + inputBoxId).typeahead({
        source: searchFunction,
        onselect: function(obj) {
        }
    });

person Adam Levitt    schedule 24.06.2012    source источник
comment
и какая полная ошибка пожалуйста   -  person Esailija    schedule 24.06.2012
comment
Добавил больше информации в исходный пост.   -  person Adam Levitt    schedule 24.06.2012
comment
В Bootstrap typeahead source должен быть массивом. twitter.github.com/bootstrap/javascript.html#typeahead   -  person Esailija    schedule 24.06.2012
comment
Также невозможно, чтобы это работало в 2.0.0: github .com/twitter/bootstrap/blob/ В коде есть только одно место, где source используется в качестве аргумента для $.grep.   -  person Esailija    schedule 24.06.2012
comment
В любом случае я не могу заставить вызов AJAX работать для версии 2.0.4 опережающего ввода, даже если я верну результаты вызова ajax в виде массива. Похоже, дело даже не в вызове ajax.   -  person Adam Levitt    schedule 24.06.2012
comment
bootstrap typeahead работает только с простым и простым массивом, как показано в документации и даже в исходном коде... вы должны использовать автозаполнение пользовательского интерфейса jQuery или что-то еще.   -  person Esailija    schedule 24.06.2012
comment
На самом деле раньше я заставлял его работать с удаленным источником данных, но по какой-то причине, если я динамически добавляю поле ввода на страницу, оно не работает должным образом. Это очень странно.   -  person Adam Levitt    schedule 24.06.2012
comment
Код в нижней части исходного поста выполняет вызов удаления typeahead, используя версию 2.0.0 плагина typeahead.   -  person Adam Levitt    schedule 24.06.2012
comment
Это не тип начальной загрузки, он не вызывает source как функцию и даже не имеет метода .process. Можете ли вы дать ссылку на сайт, используя это? Или сделать jsfiddle?   -  person Esailija    schedule 24.06.2012


Ответы (3)


1) Решение Bootstrap typeahead v2.0.2

взгляните на этот запрос на вытягивание, он похож на то, что вы ищете (его форк от bootstrap typeahead v2.0.2).

Сам пользуюсь, работает :)

2) Bootstrap typeahead v.2.1.0 — решение в стадии разработки

Также вы можете попробовать это решение. Я только что изменил свой проект, чтобы использовать этот, потому что он будет поддерживаться в будущих версиях и выглядит чище :)

В моем случае:

$("#typeahead").typeahead({
  source: function(query, process) {
    $.post('url_path', { q: query, limit: 4 }, function(data) {
      process(data);
    }); // end of post
  }
});

Где скрипт url_path требует 2 аргумента q (строка) и limit (ограничение результатов) и возвращает ответ json (массив):

Пример ответа на запрос i с ограничением 4:

["Эминем", "Limp Bizkit", "Рианна", "Уилл Смит"]

person ioleo    schedule 06.07.2012

Для людей, пытающихся сгенерировать данные JSON (без использования php json_encode) и задающихся вопросом, почему форк bootstrap-typeahead Терри Розен не будет работать при вызове ajax

Формат возвращаемых данных JSON должен иметь вид: -

[{"id":"1","name":"Старая машина"},{"id":"2","name":"Трамвай Кастро"},{"id":"3"," name":"Зеленые классические автомобили"},{"id":"4","name":"Автомобили, припаркованные в Antique Row"}]

Обратите внимание на кавычки

Проведя целый день, пытаясь понять, в чем проблема, я подумал, что было бы разумно опубликовать это здесь. Возможно, мое понимание JSON было неверным, но firebug показывает возвращаемые данные как действительный JSON, даже если поля id и name не заключены в кавычки. Кроме того, заголовок ответа должен иметь значение «application/json». Надеюсь, это поможет кому-то.

person Madhur    schedule 06.08.2012
comment
У меня были обе эти проблемы: старый формат JSON и заголовок ответа не были установлены в application/json, и этот ответ спас меня. - person ThisGuy; 11.05.2013

На версии 2.0.4 typeahead глючит и не принимает функции в качестве источника, только массивы. Я обновился до 2.1, и он работает, как и ожидалось.

person Yossi Shasho    schedule 26.08.2012