i'm using bootstrap typeahead v0.11.1 but i'm wondering if i can set an other value for ttl (the default one is 1 day )
this is my code :
var taxes = new Bloodhound({
datumTokenizer: function (datum) {
return Bloodhound.tokenizers.whitespace(datum.name);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url :'/taxes.json'
ttl : 5000
},
remote: {
url: '/source.php?query=%QUERY',
filter: function (taxes) {
// Map the remote source JSON array to a JavaScript object array
return $.map(taxes, function (movie) {
return {
val: movie.val,
name: movie.name,
type: movie.type
};
});
},
wildcard : '%QUERY'
}
});
taxes.initialize();
$('#pretva_name').typeahead({ highlight:false,
hint: false,
offset: false,
minLength:2}, {
display: 'name',
source: taxes.ttAdapter(),
});
The remote option is working just fine but the prefetched source is always the same
Related
I want to use Twitter Typeahead with a remote db datasource. I managed to get the results returned from my .php file with
return json_encode($results);
The are formatted like this:
["chrome","test01","test02","wddwde"].
But I do not know how to get them to show as suggestions?
For comparison I added the prefetched 'countries_bloodhound' as well as the integration part of this variable and it works fine. I need help with 'users_bloodhound' and its integration.
var users_bloodhound = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
//name: 'users',
remote: {url:'./search.php?query=%QUERY',
wildcard: 'QUERY',
transform: function(response) {
// Map the remote source JSON array to a JavaScript object array
return $.map(response.results, function(user) {
return {
name: user
};
}
);}
},
limit: 10
});
var countries_bloodhound = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: 'https://cdn.rawgit.com/twitter/typeahead.js/gh-pages/data/countries.json',
filter: function (countries) {
return $.map(countries, function (country) {
return {
name: country
};
});
}
}
});
countries.initialize();
users_bloodhound.initialize();
$('#bloodhound .typeahead').typeahead({
highlight: true
}, {
name: 'users',
displayKey: 'name',
source: users_bloodhound.ttAdapter(),
templates: {
header: '<h4 class="search-name"><small>Users</small></h4>'
}},{
name: 'countries',
displayKey: 'name',
source: countries_bloodhound.ttAdapter(),
templates: {
header: '<h4 class="search-name"><small>Countries</small></h4>'
}
});
The code is correct. I had some problems with my .php file because I returned the results instead of echoing them.
i am current using this plugin for tags-input 'bootstrap-tagsinput'
i am trying to use the typeahead feature provided by this plugin.
the source attribute in typeahead expects a promise to be returned.but i need to modify the returned data. How do i do this?
$('input').tagsinput({
typeahead: {
source: function(query) {
return $.get('/tags.json').then(function(data){
return _.pluck(data.tags,'keyword');
});
}
}
});
Try
var list = ["Amsterdam", "Beijing", "Cairo"];
var citynames = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: '/tags.json',
filter: function (res) {
// modify returned data here ,
// e.g., `res` : `["abc"]`
return $.map(res[0].split(""), function (val, i) {
return {
name: val.toUpperCase() === list[i][0] ? list[i] : null
};
});
}
}
});
citynames.initialize();
$('input.bootstrap-tagsinput').tagsinput({
typeaheadjs: {
name: 'citynames',
displayKey: 'name',
valueKey: 'name',
source: citynames.ttAdapter()
}
});
jsfiddle http://jsfiddle.net/guest271314/dbfx1tso/
See Bootstrap Tags Input Typeahead
Hi I'm having troubles upgrading my typeahead js from 0.9.3 to 0.10.5. It worked in 0.9.3, but I can't seem to get my remote connection working in the latest version.
I'm using the following code.
init = function(spec) {
var $field;
$field = $(document.getElementById(spec.id));
var suggestions = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: spec.url,
replace: function(uri, query) {
return extendURL(uri, {
"t:input": query
});
},
filter: function(response) {
return response.matches;
}
}
});
suggestions.initialize();
return $field.typeahead({
limit: 5,
displayKey: 'value',
source: suggestions.ttAdapter()
});
};
return exports = init;
in 0.9.2 the following code worked, but for some reason every time you did a key down in the input box, the suggestions disappeared until keyup with a match. I'm hoping this upgrade will fix my issue or perhaps there was a configuration issue that caused it.
init = function(spec) {
var $field;
$field = $(document.getElementById(spec.id));
return $field.typeahead({
minLength: spec.minChars,
limit: 5,
remote: {
url: spec.url,
replace: function(uri, query) {
return extendURL(uri, {
"t:input": query
});
},
filter: function(response) {
return response.matches;
}
}
});
};
I was missing the null in the constructor.
return $field.typeahead({
limit: 5,
displayKey: 'value',
source: suggestions.ttAdapter()
});
Fixed version
return $field.typeahead(null, {
minLength: spec.minChars,
displayKey: 'value',
source: suggestions.ttAdapter(),
});
So I want to use typehead.js to have an autocomplete field (http://twitter.github.io/typeahead.js/) :
$(document).ready(function() {
var result;
var result = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.Domain.domain); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 10,
prefetch: {
url: 'data.json'
}
});
result.initialize();
$('.example-twitter-oss .typeahead').typeahead(null, {
name: 'twitter-oss',
displayKey: 'Domain.domain',
source: result.ttAdapter(),
templates: {
suggestion: Handlebars.compile([
'<p class="repo-language">Class {{Domain.class}}</p>',
'<p class="repo-name"><img src="http://www.google.com/s2/favicons?domain={{Domain.domain}}" alt=""> {{Domain.domain}}</p>',
'<p class="repo-description">{{Domain.company}}</p>'
].join(''))
}
});
});
This is my data source :
[
{
"Domain":{
"domain":"duckduckgo.com",
"company":"DuckDuckGo, Inc.",
"category":"0"
}
},
{
"Domain":{
"domain":"twitter.com",
"company":"Twitter, Inc.",
"category":"0"
}
},
{
"Domain":{
"domain":"apple.com",
"company":"Apple, Inc.",
"category":"0"
}
}
]
It seems that the dropdown menu works fine, but the input field does not have the prediction displaying (I mean it you start typing "Twi" it does not display in grey "tter" ).
Any idea on how to solve this ?
Your display key is incorrect. typeahead.js will not parse your key and know that it needs to access a nested object. Instead, in order to achieve the functionality you want, do the following:
$('.example-twitter-oss .typeahead').typeahead(null, {
// ...
displayKey: function(o) { return o.Domain.domain; }
// ...
});
I am using the last twitter typeahead.
var suggestions = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {url:'/xxx?text=%QUERY',
ajax:{
type : 'post',
dataType : 'json'
}
}
});
suggestions.initialize();
$('.typeahead').typeahead(null, {
displayKey: 'id',
source: suggestions.ttAdapter(),
templates: {
empty: '<p style="width:50%;margin:auto;">No result</p>',
suggestion: function(object){
var str = ['<p>',
object.id,
'</p><a class="btn btn-info btn-small" href="item.html?id="',
object.id,
'>Open</a>'].join('');
return str;
}
}
});
The problem is that I recieve 5 objects of type
{
id: 0,
field: '',
value: ''
}
All 5 objects have the same id and therefore are fields of one result and should be put into one suggestion. Typeahead treats them as separate suggestions which I don't want.
How do I map over the results of the ajax call, transform it and pass the result back to typeahead?
You could use the filter(parsedResponse) to do the parsing of the response yourself. You can see an example (to an unrelated answer) here.