Как устранить неполадки в Typeahead и bootstrap

#jquery #typeahead.js #bootstrap-typeahead

#jquery #typeahead.js #bootstrap-typeahead

Вопрос:

Я включил jQuery 2.1 bootstrap 3.x и последнюю версию typeahead. Это мой код:

 <script type="text/javascript">
    $(document).ready(function () {
        var bestPictures = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            prefetch: {
                    url: 'TypeAheadPrefetch.ashx',
                    filter: function (list) {
                        return $.map(list, function (country) { alert(country); return { name: country }; });
                    }
                },
            remote: 'AutoComplete.asmx/GetSuperSearchTypeAhead?q=%QUERY'
        });
        bestPictures.initialize();

        $("#tbSSearch").typeahead(null, {
            name: 'best-pictures',
            displayKey: 'value',
            source: bestPictures.ttAdapter()
        });
    });
</script>
<input type="text" id="tbSSearch" placeholder="ST Super Search" class="form-control" />
 

Предварительная выборка.ashx возвращает ["a","b","c" etc. Предварительно выбранный массив строк настолько велик, что он должен содержать правильный результат. Таким образом, нет необходимости вызывать удаленный. Но это так!! Почему это так? И почему нет видимого выпадающего списка?

Консоль моего браузера показывает ошибку в библиотеке typeahead в строке 134 col 12 на return s.split(/s /);

ps alert(country); работает

введите описание изображения здесь

Комментарии:

1. Можете ли вы привести пример того, что возвращает GetSuperSearchTypeAhead?

2. массив строк в формате json (аналогично prefetch.ashx)

Ответ №1:

В вашем определении «datumTokenizer» попробуйте изменить «значение» на «имя», например :

 datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
 

«значение» не существует в вашем списке данных, тогда как «имя» существует (см. Вашу функцию фильтра), так что это может быть причиной проблемы.

Аналогично измените

 displayKey: 'value',
 

Для:

 displayKey: 'name',
 

Я не тестировал этот ответ, так как всегда неудобно воссоздавать проблемы, связанные с удаленными / предварительными выборками вызовов данных!

Комментарии:

1. Рад, что смог помочь @JPHellemons