Подтвердить что ты не робот

Twitter bootstrap 3.0 typeahead Пример ajax

Существует много примеров aaax типа ahead для бутстрапа 2, например, здесь twitter bootstrap typeahead ajax example.

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

С 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_results отображаются на входе typeahead.

Ответ 2

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

В script 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 и мой script на странице, а вокруг моего поля ввода есть 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;
}

Ответ 3

Я использую это 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>

Ответ 5

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

<script type="text/javascript">
var data = ["Aamir", "Amol", "Ayesh", "Sameera", "Sumera", "Kajol", "Kamal",
  "Akash", "Robin", "Roshan", "Aryan"];
$(function() {
    $('#typeahead-input').typeahead({
        source: function (query, process) {
               process(data);
            });
        }
    });
});
</script>