Я пытаюсь найти рабочий пример элемента начальной загрузки twitter, который будет вызывать ajax, чтобы заполнить его выпадающий список.
У меня есть работающий пример автозаполнения JQuery, который определяет URL-адрес ajax и как обработать ответ
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var options = { minChars:3, max:20 };
$("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result(
function(event, data, formatted)
{
window.location = "./runner/index/id/"+data[1];
}
);
..
Что мне нужно изменить, чтобы преобразовать это в пример typeahead?
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var options = { source:'/index/runnerfilter/format/html', items:5 };
$("#runnerquery").typeahead(options).result(
function(event, data, formatted)
{
window.location = "./runner/index/id/"+data[1];
}
);
..
Я собираюсь дождаться решения проблемы « Добавление поддержки удаленных источников для typeahead ».
Ответы:
Изменить: typeahead больше не входит в Bootstrap 3. Проверьте:
Начиная с Bootstrap 2.1.0 до 2.3.2, вы можете сделать это:
Чтобы использовать данные в формате JSON следующим образом:
Обратите внимание, что данные JSON должны иметь правильный тип MIME (application / json), поэтому jQuery распознает их как JSON.
источник
get
вместоgetJSON
? Это кажется более подходящим.Вы можете использовать форк BS Typeahead, который поддерживает вызовы ajax. Тогда вы сможете написать:
источник
["aardvark", "apple"]
. Я должен был явно установитьdataType
параметр в$.post
вызове. Смотрите jQuery.post () .Content-type
заголовокapplication/json
source
функцию для выполнения.Начиная с Bootstrap 2.1.0:
HTML:
Javascript:
Теперь вы можете создать единый код, разместив ссылки «json-request» в своем HTML-коде.
источник
$(this)[0].$element.data('link')
.this.$element.data('link')
Все ответы относятся к типу BootStrap 2, которого больше нет в BootStrap 3.
Для всех, кто направил сюда, ищет пример AJAX, используя новый пост-Bootstrap Twitter typeahead.js , вот рабочий пример. Синтаксис немного отличается:
В этом примере используются синхронные (вызов processSync ) и асинхронные предложения, поэтому вы увидите, что некоторые параметры появляются сразу, а затем добавляются другие. Вы можете просто использовать один или другой.
Существует множество привязываемых событий и несколько очень мощных опций, в том числе работа с объектами, а не со строками, и в этом случае вы будете использовать собственную настраиваемую функцию отображения для отображения ваших элементов в виде текста.
источник
["Thing 1","Thing 2"]
, или с пользовательской функцией отображения, массив объектов в соответствии с вашими потребностями, например,[{"id":1,"label":"Foo"},{"id":2,"label":"Bar"}]
[{"id":1,"label":"Foo"},{"id":2,"label":"Bar"}]
, Теперь я хочу показать два столбца в раскрывающемся списке typeahead с идентификатором и меткой. Как я могу это сделать?Я дополнил оригинальный плагин Bootstrap typeahead возможностями ajax. Очень прост в использовании:
Вот репозиторий Github : Ajax-Typeahead
источник
JSON
выглядеть сторона сервера ? Я получаюUncaught TypeError: Cannot read property 'length' of undefined
. Я используюjson_encode($array)
и отправляю правильные заголовки ('Content-Type: application/json; charset=utf-8'
). JQuery версияjQuery v1.9.1
Я сделал некоторые изменения в jquery-ui.min.js:
и добавить следующий CSS
Работает отлично.
источник
Я использую этот метод
источник
Можно делать звонки с помощью Bootstrap. В текущей версии нет проблем с обновлением исходного кода. Проблема с обновлением источника данных начальной загрузки Bootstrap с последующим ответом , то есть источник загрузочного обновления после обновления может быть снова изменен.
Пожалуйста, обратитесь к примеру ниже:
источник
Для тех, кто ищет кофейную версию принятого ответа:
источник
Я просмотрел этот пост, и все не хотело работать правильно, и в итоге собрал воедино кусочки из нескольких ответов, так что у меня есть 100% работающая демоверсия, и я вставлю ее сюда для справки - вставьте ее в файл php и убедитесь, что файлы включены в правильное место.
источник
Попробуйте это, если ваш сервис не возвращает правильный заголовок типа контента application / json:
источник
ОБНОВЛЕНИЕ: я изменил свой код с помощью этого форка
также вместо использования $ .each я изменил на $ .map, как это было предложено Томиславом Марковским
Однако я сталкиваюсь с некоторыми проблемами, получая
как вы можете видеть на более новом посте, я пытаюсь выяснить здесь
надеюсь, что это обновление поможет вам ...
источник
Array.map
вместо этого$.each
и заменил бы содержимое всей вашейsuccess
функции обратного вызова наvar manufacturers = results.data.manufacturers.map(function (item) { return { id: item.Manufacturer.id, manufacturer: item.Manufacturer.manufacturer } });
У меня нет рабочего примера для вас, и у меня нет очень чистого решения, но позвольте мне рассказать вам, что я нашел.
Если вы посмотрите на код JavaScript для TypeAhead, он будет выглядеть так:
Этот код использует метод "grep" jQuery для сопоставления элемента в исходном массиве. Я не видел ни одного места, где вы могли бы подключить вызов AJAX, поэтому нет «чистого» решения для этого.
Тем не менее, один довольно хакерский способ сделать это - воспользоваться преимуществами метода grep в jQuery. Первым аргументом grep является исходный массив, а вторым аргументом является функция, которая используется для сопоставления исходного массива (обратите внимание, что Bootstrap вызывает «совпадение», которое вы указали при его инициализации). То, что вы можете сделать, это установить источник в фиктивный одноэлементный массив и определить совпадение как функцию с вызовом AJAX. Таким образом, он будет запускать вызов AJAX только один раз (поскольку ваш исходный массив содержит только один элемент).
Это решение не только хакерское, но и будет страдать от проблем с производительностью, поскольку код TypeAhead предназначен для поиска при каждом нажатии клавиши (вызовы AJAX действительно должны происходить только после нескольких нажатий клавиш или после определенного количества времени простоя). Я советую попробовать, но придерживайтесь другой библиотеки автозаполнения или используйте ее только для ситуаций без AJAX, если у вас возникнут какие-либо проблемы.
источник
при использовании ajax, попробуйте
$.getJSON()
вместо,$.get()
если у вас есть проблемы с правильным отображением результатов.В моем случае я получил только первый символ каждого результата, когда я использовал
$.get()
, хотя я использовал наjson_encode()
стороне сервера.источник
я использую
$().one()
для решения этого; Когда страница загружена, я отправляю ajax на сервер и жду, когда все будет готово. Затем передайте результат в функцию.$().one()
важно. Потому что заставьте typehead.js присоединиться к вводу один раз. извините за плохое написание.источник
?>
источник