twitter bootstrap 3 0 typeahead ajax example

Question

There are a lot of typeahead ajax examples out there for bootstrap 2  for example this here twitter bootstrap typeahead ajax example   However I am using bootstrap 3 and I could not find a complete example  instead there are just a bunch of incomplete information snippets with links to other websites  for example this here Where is the typeahead JavaScript module in Bootstrap 3 RC 1   Could someone please post a fully working example on how to use typeahead with bootstrap 3  if you load the data from the server via ajax  every time the user changes the input

User · Answer

Here is my step by step experience  inspired by typeahead examples  from a Scala PlayFramework app we are working on     In a script LearnerNameTypeAhead coffee  convertible of course to JS  I have     - gt    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     I included the typeahead bundle and my script on the page  and there is a div around my input field as follows    lt script src  routes Assets at  javascripts typeahead bundle js   gt  lt  script gt   lt script src  routes Assets at  javascripts LearnerNameTypeAhead js   type  text javascript   gt  lt  script gt   lt div gt     lt input name  firstName  id  firstName  class  typeahead  placeholder  First Name  value   firstName  gt   lt  div gt    The result is that for each character typed in the input field after the first minLength  3  characters  the page issues a GET request with a URL looking like  learner namelike nameLikeStr  plus the currently typed characters  The server code returns a json array of objects containing fields  id  and  value   for example like this            id    109        value    Graham Jones                id    5833        value    Hezekiah Jones        For play I need something in the routes file   GET  learner namelike controllers Learners namesLike nameLikeStr String    And finally  I set some of the styling for the dropdown  etc  in a new typeahead css file which I included in the page s  lt head gt   or accessible  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

User · Answer

I m using this https   github com biggora bootstrap-ajax-typeahead  The result of code using Codeigniter PHP     lt pre gt       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                                                                                        lt  pre gt

User · Answer

Here you can find info on how to upgrade to v3  http   tosbourn com 2013 08 javascript upgrading-from-bootstraps-typeahead-to-typeahead-js   Here are some examples too  http   twitter github io typeahead js examples

User · Answer

With bootstrap3-typeahead  I made it to work with the following code      lt input id  typeahead-input  type  text  data-provide  typeahead    gt    lt script type  text javascript  gt  jQuery document  ready function             typeahead-input   typeahead           source  function  query  process                return   get  search q     query  function  data                    return process data search results                                         lt  script gt    The backend provides search service under the search GET endpoint  receiving the query in the q parameter  and returns a JSON in the format    search results     resultA    resultB            The elements of the search resultsarray are displayed in the typeahead input

User · Answer

lt input id  typeahead-input  type  text  data-provide  typeahead    gt    lt script type  text javascript  gt  var data     Aamir    Amol    Ayesh    Sameera    Sumera    Kajol    Kamal      Akash    Robin    Roshan    Aryan      function             typeahead-input   typeahead           source  function  query  process                   process data                                          lt  script gt

[autocomplete] twitter bootstrap 3.0 typeahead ajax example

Examples related to autocomplete

Examples related to twitter-bootstrap-3

Examples related to typeahead.js

Examples related to bootstrap-typeahead