twitter bootstrap 3.0 typeahead пример ajax

Для начальной загрузки 2 существует множество примеров ajax typeahead, например здесь twitter bootstrap typeahead ajax пример.

Однако я использую bootstrap 3, и мне не удалось найти полный пример, вместо этого есть просто несколько фрагментов неполной информации со ссылками на другие веб-сайты, например здесь Где находится модуль JavaScript typeahead в Bootstrap 3 RC 1?

Может ли кто-нибудь опубликовать полностью рабочий пример того, как использовать typeahead с bootstrap 3, если вы загружаете данные с сервера через ajax каждый раз, когда пользователь меняет ввод.


autocomplete twitter-bootstrap-3 typeahead.js bootstrap-typeahead
person Pascal Klein    schedule 10.04.2014    source источник
comment
Этот пример работает для Bootstrap 3 bootply.com/86571   -  person Zim    schedule 10.04.2014
comment
@Baghoo, я искал пример удаленного получения данных через Ajax.   -  person Pascal Klein    schedule 11.04.2014

Ответы (5)


arrow_upward
40
arrow_downward

С bootstrap3-typeahead я заставил его работать со следующим кодом:

<input id="typeahead-input" type="text" data-provide="typeahead" />

<script type="text/javascript">
jQuery(document).ready(function() {
    $('#typeahead-input').typeahead({
        source: function (query, process) {
            return $.get('search?q=' + query, function (data) {
                return process(data.search_results);
            });
        }
    });
})
</script>

Бэкэнд предоставляет службу поиска под конечной точкой search GET, получает запрос в параметре q и возвращает JSON в формате { 'search_results': ['resultA', 'resultB', ... ] }. Элементы search_resultsarray отображаются во вводе с опережением ввода.

person Michael    schedule 11.09.2014
comment
github.com/bassjobsen/Bootstrap-3-Typeahead был самым быстрым способом обновления для я тоже - person magicrebirth; 20.12.2014
comment
супер. Не удалось найти полный пример в документации. Этот ответ очень помогает - person Anupam; 09.05.2017
comment
Здесь тоже есть хороший пример: tatiyants.com/ - person Anupam; 13.05.2017
comment
Работает нормально, но, к сожалению, предложение выпадает. - person BASEER HAIDER JAFRI; 21.03.2018
comment
Что значит process ?? - person Corni; 16.08.2019

arrow_upward
4
arrow_downward

Вот мой пошаговый опыт, вдохновленный примерами typeahead из Scala / PlayFramework. приложение, над которым мы работаем.

В скрипте LearnerNameTypeAhead.coffee (конвертируемый, конечно, в JS) у меня есть:

$ ->
  learners = new Bloodhound(
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value")
    queryTokenizer: Bloodhound.tokenizers.whitespace
    remote: "/learner/namelike?nameLikeStr=%QUERY"
  )
  learners.initialize()
  $("#firstName").typeahead 
    minLength: 3
    hint: true
    highlight:true
   ,
    name: "learners"
    displayKey: "value"
    source: learners.ttAdapter()

Я включил пакет typeahead и свой скрипт на страницу, и вокруг моего поля ввода есть div:

<script [email protected]("javascripts/typeahead.bundle.js")></script>
<script [email protected]("javascripts/LearnerNameTypeAhead.js") type="text/javascript" ></script>
<div>
  <input name="firstName" id="firstName" class="typeahead" placeholder="First Name" value="@firstName">
</div>

В результате для каждого символа, введенного в поле ввода после первых символов minLength (3), страница выдает запрос GET с URL-адресом вида /learner/namelike?nameLikeStr= плюс набранные в данный момент символы. Код сервера возвращает массив объектов json, содержащий поля «id» и «value», например, например:

[ {
    "id": "109",
    "value": "Graham Jones"
  },
  {
    "id": "5833",
    "value": "Hezekiah Jones"
} ]

Для игры мне нужно кое-что в файле маршрутов:

GET /learner/namelike controllers.Learners.namesLike(nameLikeStr:String)

И, наконец, я установил некоторые стили для раскрывающегося списка и т. Д. В новом файле typeahead.css, который я включил в <head> страницы (или доступный .css)

.tt-dropdown-menu {
  width: 252px;
  margin-top: 12px;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.typeahead {
  background-color: #fff;
}
.typeahead:focus {
  border: 2px solid #0097cf;
}
.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
  color: #999
}
.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}
.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;
}
.tt-suggestion p {
  margin: 0;
}
person wwkudu    schedule 04.07.2014
comment
откуда ты взял стили? Без них это ужасно в моем проекте BS-3. Со стилями смотрится отлично. - person raider33; 07.09.2014
comment
@ raider33 Я думаю, что получил их, просмотрев страницу Twitter Typeahead examples. Возможно, мне пришлось немного подстроиться, чтобы соответствовать стилям моего проекта. - person wwkudu; 08.09.2014
comment
Что это за класс ищейки? И не могли бы вы переписать пост javascript, а затем coffeescript. Я знаю, что могу преобразовать его, но я думаю, что каждый может читать кофе, может читать простой javascript, но не наоборот. - person Pascal Klein; 16.09.2014
comment
@PascalKlein Bloodhound - это механизм предложений, код, который решает, какие варианты вернуть, в зависимости от того, что было набрано до сих пор. Дополнительные документы см. На странице TypeAhead. По их словам, впереди нужно напечатать две части: представление пользовательского интерфейса (Typeahead) и механизм предложений (в данном случае Bloodhound). - person wwkudu; 16.09.2014
comment
Спасибо за ваш пример. убедитесь, что идентификатор div, а не идентификатор ввода - это тот, который упоминается в скрипте - ›на самом деле вы имеете в виду $("#getLearnerLike .typeahead"), которое является полем ввода в этом div. - person Christof; 01.05.2016

arrow_upward
3
arrow_downward

Я использую этот https://github.com/biggora/bootstrap-ajax-typeahead

Результат кода с использованием Codeigniter / PHP

<pre>

$("#produto").typeahead({
        onSelect: function(item) {
            console.log(item);
            getProductInfs(item);
        },
        ajax: {
            url: path + 'produto/getProdName/',
            timeout: 500,
            displayField: "concat",
            valueField: "idproduto",
            triggerLength: 1,
            method: "post",
            dataType: "JSON",
            preDispatch: function (query) {
                showLoadingMask(true);
                return {
                    search: query
                }
            },
            preProcess: function (data) {

                if (data.success === false) {
                    return false;
                }else{
                    return data;    
                }                
            }               
        }
    });
</pre>
person Luiz Fernando Fonseca    schedule 03.10.2014
comment
Это для Twitter Bootstrap 2.0+ - person Pascal Klein; 07.10.2014

arrow_upward
1
arrow_downward

Здесь вы можете найти информацию о том, как перейти на версию 3: http://tosbourn.com/2013/08/javascript/upgrading-from-bootstraps-typeahead-to-typeahead-js/

Вот несколько примеров: http://twitter.github.io/typeahead.js/examples/

person netcult    schedule 15.04.2014
comment
Что вы имеете в виду под обновлением? Не могли бы вы, пожалуйста, просто введите здесь действительный пример. - person Pascal Klein; 16.04.2014
comment
Я имел в виду, что если у вас есть рабочий typeahead для bootstrap2, вы можете обновить его, используя эту информацию. Вторая ссылка может быть для вас более полезной? - person netcult; 16.04.2014
comment
Эта ссылка мертва, пожалуйста, вставьте содержимое в ответ, а не ссылайтесь на нее извне. - person Keith; 07.04.2016

arrow_upward

arrow_downward

person    schedule
comment
Этот ответ можно было бы улучшить, если бы он не был 100% кодом. - person johnnyRose; 21.01.2016