it-roy-ru.com

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

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

270
emeraldjava

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

Начиная с 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.

294
Stijn Van Bael

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

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

Начиная с 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-коде.

69
Thantifaxath

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

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

$('#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 для визуализации ваших элементов в виде текста.

43
Jonathan Lidbeck

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

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

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

24
Paul Warelis

Я сделал некоторые изменения в 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;        
}

Работает отлично.

5
bmoers

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

$('.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');
    }
});
3
Krava

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

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

Я просмотрел этот пост, и все не хотело работать правильно, и в итоге собрал воедино кусочки из нескольких ответов, так что у меня есть 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>
2
l0ft13

Можно делать звонки с помощью Bootstrap. В текущей версии нет проблем с обновлением исходного кода Проблема с обновлением источника данных начальной загрузки Bootstrap с последующим ответом , Т. Е. Источник загрузочного обновления после обновления может быть снова изменен.

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

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,
});
2
neoeahit

ОБНОВЛЕНИЕ: я изменил свой код, используя это fork 

также вместо того, чтобы использовать $ .each, я изменил на $ .map, как предложил Томислав Марковский.

$('#manufacturer').typeahead({
    source: function(typeahead, query){
        $.ajax({
            url: window.location.Origin+"/bows/get_manufacturers.json",
            type: "POST",
            data: "",
            dataType: "JSON",
            async: false,
            success: function(results){
                var manufacturers = new Array;
                $.map(results.data.manufacturers, function(data, item){
                    var group;
                    group = {
                        manufacturer_id: data.Manufacturer.id,
                        manufacturer: data.Manufacturer.manufacturer
                    };
                    manufacturers.Push(group);
                });
                typeahead.process(manufacturers);
            }
        });
    },
    property: 'name',
    items:11,
    onselect: function (obj) {

    }
});

Однако я сталкиваюсь с некоторыми проблемами, получая

Uncaught TypeError: Невозможно вызвать метод toLowerCase из неопределенного

как вы можете видеть на более новом посте, я пытаюсь выяснить здесь

надеюсь, что это обновление поможет вам ...

1
mmoscosa

Попробуйте это, если ваш сервис не возвращает правильный заголовок типа контента application/json:

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('/typeahead', { query: query }, function (data) {
            var json = JSON.parse(data); // string to json
            return process(json.options);
        });
    }
});
1
Andres

при использовании ajax попробуйте $.getJSON() вместо $.get(), если у вас возникли проблемы с правильным отображением результатов.

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

0
larsbo

я использую $().one() для решения этой проблемы; Когда страница загружена, я отправляю ajax на сервер и жду, когда будет выполнено . Затем важно передать результат в функцию .$().one(). Потому что принудительно typehead.js подключаем к входу один раз. извините за плохое письмо.

(($) => {
    
    var substringMatcher = function(strs) {
        return function findMatches(q, cb) {
          var matches, substringRegex;
          // an array that will be populated with substring matches
          matches = [];
      
          // regex used to determine if a string contains the substring `q`
          substrRegex = new RegExp(q, 'i');
      
          // iterate through the pool of strings and for any string that
          // contains the substring `q`, add it to the `matches` array
          $.each(strs, function(i, str) {
            if (substrRegex.test(str)) {
              matches.Push(str);
            }
          });
          cb(matches);
        };
      };
      
      var states = [];
      $.ajax({
          url: 'https://baconipsum.com/api/?type=meat-and-filler',
          type: 'get'
      }).done(function(data) {
        $('.typeahead').one().typeahead({
            hint: true,
            highlight: true,
            minLength: 1
          },
          {
            name: 'states',
            source: substringMatcher(data)
          });
      })
      

})(jQuery);
.tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999;
}

.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
    cursor: pointer;
}

.tt-suggestion:hover {
    color: #f0f0f0;
    background-color: #0097cf;
}

.tt-suggestion p {
    margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://Twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

<input class="typeahead" type="text" placeholder="where ?">

0
ali karimi

У меня нет рабочего примера для вас, и у меня нет очень чистого решения, но позвольте мне рассказать вам, что я нашел.

Если вы посмотрите на код JavaScript для TypeAhead, он будет выглядеть так:

items = $.grep(this.source, function (item) {
    if (that.matcher(item)) return item
  })

Этот код использует метод "grep" jQuery для сопоставления элемента в исходном массиве. Я не видел ни одного места, где вы могли бы подключиться к вызову AJAX, поэтому для этого нет «чистого» решения.

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

Это решение не только хакерское, но и будет страдать от проблем с производительностью, поскольку код TypeAhead предназначен для поиска при каждом нажатии клавиши (вызовы AJAX действительно должны происходить только после нескольких нажатий клавиш или после определенного количества времени простоя). Я советую попробовать, но придерживайтесь другой библиотеки автозаполнения или используйте ее только для ситуаций без AJAX, если у вас возникнут какие-либо проблемы.

0
Aamer Abbas