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.
This question is related to
autocomplete
twitter-bootstrap-3
typeahead.js
bootstrap-typeahead
<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>
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:
$ ->
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:
<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>
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 <head> (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;
}
I'm using this https://github.com/biggora/bootstrap-ajax-typeahead
The result of code using 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>
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/
Source: Stackoverflow.com