Twitter bootstrap typeahead 2.0.4 ajax error

У меня есть следующий код, который определенно возвращает правильный результат данных, если я использую версию 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) {
        }
    });

ОТВЕТЫ

Ответ 1

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

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

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

[ "Eminem", "Limp Bizkit", "Rihanna", "Will Smith" ]

Ответ 2

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

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

[{ "id" : "1", "name": "Old car" }, { "id" : "2", "name": "Castro trolley car" }, { "id" : "3", "name": "Зеленые классические автомобили" }, { "id": "4", "name": "Автомобили, припаркованные в античной строке" }]

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

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

Ответ 3

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