пример начальной загрузки Twitter aaax

Question

Я пытаюсь найти рабочий пример элемента twitter bootstrap typeahead , который будет выполнять вызов 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 '.

Answer 1

Редактировать: typeahead больше не входит в Bootstrap 3. Извлечение:

• Где находится модуль JavaScript typeahead в Bootstrap 3 RC 1?
• typeahead.js

Начиная с Bootstrap 2.1.0 до 2.3.2, вы можете сделать это:

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('/typeahead', { query: query }, function (data) {
            return process(data.options);
        });
    }
});

Чтобы использовать данные JSON следующим образом:

{
    "options": [
        "Option 1",
        "Option 2",
        "Option 3",
        "Option 4",
        "Option 5"
    ]
}

Обратите внимание, что данные JSON должны иметь правильный тип MIME (application / json), поэтому jQuery распознает их как JSON.

Answer 2

Вы можете использовать BS Typeahead fork , который поддерживает вызовы ajax.Тогда вы сможете написать:

$('.typeahead').typeahead({
    source: function (typeahead, query) {
        return $.get('/typeahead', { query: query }, function (data) {
            return typeahead.process(data);
        });
    }
});

Answer 3

Начиная с Bootstrap 2.1.0:

HTML:

<input type='text' class='ajax-typeahead' data-link='your-json-link' />

Javascript:

$('.ajax-typeahead').typeahead({
    source: function(query, process) {
        return $.ajax({
            url: $(this)[0].$element[0].dataset.link,
            type: 'get',
            data: {query: query},
            dataType: 'json',
            success: function(json) {
                return typeof json.options == 'undefined' ? false : process(json.options);
            }
        });
    }
});

Теперь вы можете создать единый код, поместив ссылки «json-request» в ваш HTML-код.

Answer 4

Все ответы относятся к заголовку BootStrap 2, которого больше нет в BootStrap 3.

Для всех, кто направил сюда, ищет пример AJAX с использованием новой пост-Bootstrap подсказки Twitterjs , вот рабочий пример.Синтаксис немного отличается:

$('#mytextquery').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  limit: 12,
  async: true,
  source: function (query, processSync, processAsync) {
    processSync(['This suggestion appears immediately', 'This one too']);
    return $.ajax({
      url: "/ajax/myfilter.php", 
      type: 'GET',
      data: {query: query},
      dataType: 'json',
      success: function (json) {
        // in this example, json is simply an array of strings
        return processAsync(json);
      }
    });
  }
});

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

Существует множество привязываемых событий и несколько очень мощных опций, включая работу с объектами, а не со строками, в этом случае вы бы использовали свой собственный display функция для отображения ваших предметов в виде текста.

Answer 5

Я дополнил оригинальный плагин Bootstrap typeahead возможностями ajax.Очень прост в использовании:

$("#ajax-typeahead").typeahead({
     ajax: "/path/to/source"
});

Вот репозиторий github: Ajax-Typeahead

Answer 6

Я сделал некоторые изменения в jquery-ui.min.js:

//Line 319 ORIG:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").appendTo(d(...
// NEW:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").addClass("typeahead").addClass("dropdown-menu").appendTo(d(...

// Line 328 ORIG:
this.element.addClass("ui-menu ui-widget ui-widget-content ui-corner-all").attr...
// NEW:this.element.attr....

// Line 329 ORIG:
this.active=a.eq(0).children("a")
this.active.children("a")
// NEW:
this.active=a.eq(0).addClass("active").children("a")
this.active.removeClass("active").children("a")`

и добавить следующий css

.dropdown-menu {
    max-width: 920px;
}
.ui-menu-item {
    cursor: pointer;        
}

Отлично работает.

Answer 7

Я использую этот метод

$('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
},
    {
    name: 'options',
    displayKey: 'value',
    source: function (query, process) {
        return $.get('/weather/searchCity/?q=%QUERY', { query: query }, function (data) {
            var matches = [];
            $.each(data, function(i, str) {
                matches.push({ value: str });
            });
            return process(matches);

        },'json');
    }
});

Answer 8

Я прошел этот пост, и все не хотело работать правильно, и в итоге я собрал воедино кусочки из нескольких ответов, так что у меня есть 100% рабочая демонстрация, и я вставлю ее сюда для справки - вставьте ее в файл php и убедитесь, что включает в себя в нужном месте.

<?php if (isset($_GET['typeahead'])){
    die(json_encode(array('options' => array('like','spike','dike','ikelalcdass'))));
}
?>
<link href="bootstrap.css" rel="stylesheet">
<input type="text" class='typeahead'>
<script src="jquery-1.10.2.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('index.php?typeahead', { query: query }, function (data) {
            return process(JSON.parse(data).options);
        });
    }
});
</script>

Answer 9

Для тех, кто ищет кофейную версию принятого ответа:

$(".typeahead").typeahead source: (query, process) ->
  $.get "/typeahead",
    query: query
  , (data) ->
    process data.options

Answer 10

Можно совершать звонки с помощью Bootstrap. В текущей версии нет проблем с обновлением исходного кода. Ошибка обновления источника данных Bootstrap typeahead с последующим ответом то есть источник начальной загрузки после обновления может быть снова изменен.

Пожалуйста, обратитесь к примеру ниже:

jQuery('#help').typeahead({
    source : function(query, process) {
        jQuery.ajax({
            url : "urltobefetched",
            type : 'GET',
            data : {
                "query" : query
            },
            dataType : 'json',
            success : function(json) {
                process(json);
            }
        });
    },
    minLength : 1,
});