bassjobsen / bootstrap-3-typeahead Goto Github PK
View Code? Open in Web Editor NEWThe Typeahead plugin from Twitter's Bootstrap 2 ready to use with Bootstrap 3 and Bootstrap 4
The Typeahead plugin from Twitter's Bootstrap 2 ready to use with Bootstrap 3 and Bootstrap 4
When add a typehead to a scrollable element the placement (height) of the typeahead dropdown is calculated wrong, See: http://bootply.com/66845 (remove the javascript to see the problem)
The scrollHeight (int or function) option can be used to correct this problem.
Example for typeahead input in the Modal use:
scrollHeight: function() { return $('.modal-body').scrollTop(); }
Refer: twbs/bootstrap#8436
Example: http://stackoverflow.com/questions/17548252/multiple-fields-with-twitters-bootstrap-typehead-inside-a-modal/17559998
hi i have a problem with a object collection via ajax.
, matcher: function (item) { return ~item.toLowerCase().indexOf(this.query.toLowerCase()); }
What happended: I type keyword in input box. The menu opens with some suggestions. I hover the first "li" element (and it highlights). When I move to the next "li" element, the menu closes.
I've solved the problem by changing the code on line 219:
this.$menu
.on('click', $.proxy(this.click, this))
.on('mouseenter', 'li', $.proxy(this.mouseenter, this))
.on('mouseleave', 'li', $.proxy(this.mouseleave, this));
(the last line I removed 'li', to):
this.$menu
.on('click', $.proxy(this.click, this))
.on('mouseenter', 'li', $.proxy(this.mouseenter, this))
.on('mouseleave', '', $.proxy(this.mouseleave, this));
Hi, I'm Taka.
Thank you for your great work.
I'm using this scripts on the multi-byte environment(OS). (I'm Japanese).
we usually use IME(Input Method Engine) to input multibyte letters such as Kanji, Kana etc.
The problem is we use the Enter Key(ASCII 13) after convert to multibyte letters by IME. and Autocomplete does not respond. (Its not only for Japanese env. it will apply for any other multibyte env.)
it's not bug, it works if I press the allow left or right. but I think a lot of people who use multi-bytes letters will be happy if autocomplete show up after convert letters using IME immediately.
so, I usually modify to use our env as bellow.
line 291:
case 9: // tab
case 13: // enter
if (!this.shown) return;
this.select();
break;
if (!this.shown) return; => if (!this.shown) { this.lookup(); return; }
Thank you.
When using the data-source attribute, typeahead takes it as a literal source.
example
as I type, I will get single letters, 'g' 'e' 't', etc... because it isn't looking at the defined getData function, but instead, using the string as the source.
it works fine if I use:
$('#tags').typeahead({ source: getData });
Found console.log in bower version ( line: 302
, focus: function (e) {
console.log('focus');
if (!this.focused) {
this.focused = true
if (this.options.minLength == 0 && !this.$element.val() || this.options.showHintOnFocus) {
this.lookup();
}
}
}
It works fine when I select element using keyboard navigation but when I try to select element using mouse from drop list it just got disappear. see the below code I have used:
$(selector).on("focus", function () {
$this = $(this);
$this.typeahead({
name: $this.attr("id"),
source: function (query, process) {
return $.ajax({
url: $this.data('link'),
type: 'post',
data: { term: query, sType: $this.data('role') },
dataType: 'json',
success: function (result) {
var resultList = result.map(function (item) {
return JSON.stringify(item);
});
return process(resultList);
}
});
},
matcher: function (obj) {
var item = JSON.parse(obj);
return ~item.label.toLowerCase().indexOf(this.query.toLowerCase())
},
sorter: function (items) {
var beginswith = [], caseSensitive = [], caseInsensitive = [], item;
while (aItem = items.shift()) {
var item = JSON.parse(aItem);
if (!item.label.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(JSON.stringify(item));
else if (~item.label.indexOf(this.query)) caseSensitive.push(JSON.stringify(item));
else caseInsensitive.push(JSON.stringify(item));
}
return beginswith.concat(caseSensitive, caseInsensitive)
},
highlighter: function (obj) {
var item = JSON.parse(obj);
var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
return item.label.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
return '<strong>' + match + '</strong>'
})
},
updater: function (obj) {
return callbackUpdater(obj);
}
});
});
Both links in the Download section are broken.
can you give an example of source call back ??
I know this one
$('.demo_typeahead').typeahead({ source:["aaaaa","bbbbbbb"] });
but i want call back when user selects any answer.
Thanks
Add ability to turn typeahead autoselect off.
Passing autoSelect to the typeahead constructor allows you to dictate
whether or not the first suggestion is selected automatically.
Turning autoselect off also means that the input won't clear if
nothing is selected and enter or tab is hit.
See: twbs/bootstrap@062082f
I have a search field where a user can search for another user based on database id, username, or email address. I would then like to display all 3 in the search results regardless of which one was used to find the user.
My server's search endpoint returns objects that look something like:
{id: 1, username: 'uname', email: '[email protected]'}
By overriding matcher
, sorter
, and highlighter
I'm able to get most of the way there visually, but it falls apart at the point that I select an item from the results list. I saw that there's the updater
that I can override, but by that point I've lost my full object. render
sets data-value
, coercing my object into a single string ('[object Object]'). I can't pick out the properties from my object.
I would specifically like a way to specify how to get the value and key of a given item.
I've modified the code to take itemKey
and itemValue
as options. Those are each functions that given an item as returned from the server, they return the key and value respectively for the item. The key is what shows up in the input control after selection, and the value is the control's value (to send back to the server), and this is working well. I left defaults in place such that if users don't want to use the added granularity, they don't have to.
Are you interested in adding this to your library? If so, I can wrap it up as a PR for your review.
In line 244 you do unbind your listeners with .off
.
This causes to unbind even the custom listeners i place outside the typeahead.
Use .unbind("keypress", this.fnKeyPress);
instead to just unbind the plugins listeners.
// line 225
, listen: function(){
this.fnKeyPress = $.proxy(this.fnKeypress, this);
this.$element.on("keypress", this.fnKeyPress);
}
[...]
// line 244
.off('focus')
.off('blur')
.unbind('keypress', this.fnKeyPress)
.off('keyup');
When inside a modal, it does not work, both when I initialize it first, or after the modal.
Hi! Many thanks for the script!
I make a choice between one dependent INPUT from another. For example, the output CITY according to the selected COUNTRY.
Here is my code:
<input type="text" class="form-control" id="inputUserEditCountry" placeholder="Country" value="" data-provide="typeahead" />
<input type="text" class="form-control" id="inputUserEditCity" placeholder="City" value="" data-provide="typeahead" />
<script>
...
// Typeahead inputSearchCountry
$.getJSON('/public/json/country.json', function(data) {
$('#inputSearchCountry').typeahead({ source: data });
});
// Typeahead inputSearchCountry
$('#inputSearchCountry').change(function() {
if ($('#inputSearchCountry').val() === 'Russia') {
$('#inputSearchCity').typeahead('destroy');
$.getJSON('/public/json/city_ru.json', function(data) {
$('#inputSearchCity').typeahead({ source: data });
});
}
else if ($('#inputSearchCountry').val() === 'Ukraine') {
$('#inputSearchCity').typeahead('destroy');
$.getJSON('/public/json/city_ua.json', function(data) {
$('#inputSearchCity').typeahead({ source: data });
});
}
});
...
</script>
This works fine in Google Chrome 32+, Opera 18+, IE 9+ and Safari 5.1+ (for PC).
But I have a small problem in the Mozilla FireFox browser (version 25+): your script works only when you click the mouse on the proposed option of COUNTRY. If you select COUNTRY using the keyboard (just press ENTER), then your script does not work.
The logs (using FireBug) no errors.
I use Bootrstrap 3.0.3 and jQuery 1.10.1.
Please help!
P.S. sorry for my english ^_^
make scroll to list
i need container with scroll
Thx
Hello guys,
since I populate dinamically the source, i want to be suggested only when I press a button, and not at typing. There's a way I can reach this?
Hi,
Could you please create a stable release with composer.json? It's very important for our team, and we think that adding composer might be a reason for releasing new minor version.
Thanks in advance.
example - http://jsfiddle.net/999eE/1/
This issue may be related to #35
I added typeahead to the "Unit" section, and it works great in firefox and in chrome (on the actual site, but not jsfiddle, I think because of the headers guithub has with that file.)
But if I view it with an ipad, using chrome or safari, the typeahead is underneath the form elements and labels if theres any there below it.
I'm looking at the source, and I can see its coming from the show() function, around line 79 -> this line
this.$menu
.insertAfter(this.$element)
.css({
top: pos.top + pos.height + scrollHeight
, left: pos.left
})
.show();
I did a test, and changed .insertAfter(this.$element)
to .insertAfter(this.$element.parent())
and it put the typeahead menu above everything as needed, but now the positioning is off.
Does anyone know how we can fix this?
Thanks
Should be as simple as bower register <my-package-name> <git-endpoint>
i.e.
bower register bootstrap3-typeahead [email protected]:bassjobsen/Bootstrap-3-Typeahead.git
Some semver tags may have to be added i.e. git tag -a "v0.1.0"
and pushed with git push --tags
Hi ~
I created a simple jsbin entry: http://jsbin.com/mutajedu/3/edit
I can't get Bloodhound to work with this library.
For whatever its worth, I was trying to debug some code:
search.get("Bosch", function(suggestions) {
suggestions.each(function(suggestion) { console.log(suggestion); });
});
Didn't work. Even tho, it was pulled directly from: https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md
This code seemed to work fine tho:, so I know the Bloodhound instance appears to be working fine.
search.get('Bosch', function (suggestions) {
jQuery.each(suggestions, function (index, item) {
console.log(item);
});
});
Any ideas?
Add a Clear Method or destroy method as found in Twitter Typeahead 0.9.3.
I found no method in clearing the source once assigned to the input. I tried with empty data source too but that couldn't help in clearing the source.
I'm using rails-assets to make importing this easier for me, but I'm currently stuck back in January 2014 because there hasn't been a new version tag since then (focusing a typeahead field still logs focus
to the console....). Can we get some more frequent versions?
You should add the 'delay' option in your documentation
i have to evaluate the onchange event of the input field i use with typeahead. when an item from the list is selected the event gets triggered, but when i change the input to something wich is not in the source of typeahead after the first enter the dropdown is just closed and after the second enter i got the onchange event triggered.
my workaround for this:
select: function () {
var val = this.$menu.find('.active').data('value');
if(this.autoSelect || val) {
this.$element
.val(this.updater(val))
.change();
}else{
this.$element.blur();
this.$element.focus();
}
return this.hide();
}
Hello !
I want to set the value of my typeahead by key.
Example :
i have "0 - Quality Poor"
i save the 0 key
i set the value of my typeahead at 0
i want my typeahead display "0 - Quality Poor" instead of "0"
How to process ?
I try to focus and trigger the key tab but nothing.
Thx for the help :D
I have a JSON object that looks like this:
[{"id":"2","article_no":"20001"},{"id":"3","article_no":"20002"},{"id":"4","article_no":"20003"}]
I'm trying to get typeahead to list 'article_nos', then fill a different field with its 'id'. Is this possible using the upadater option? I've looked around with not much luck.
Tried this: http://tatiyants.com/how-to-use-json-objects-with-twitter-bootstrap-typeahead/ but I'm not sure how to adapt it to use $.get
.
Hi, I need to use the remote method and I've read about the bloodhound extension.
Although it is not clear to me how to include it, should I include all the typeahead js files?
if I load only the files inside this directory:
./bower_components/typeahead.js/src/bloodhound/*.js
i get: Uncaught ReferenceError: _ is not defined
typeahead: {
I am using this typehead with bootstrap tagsinput. I am getting " typeerror typeahead.process is not a function " error when i query .
$('#mystuff_tag_box').tagsinput({
typeahead: {
source: function (query, process) {
return $.getJSON(
'{% url "autocomplete_tag" %}',
{ term: query },
function (data) {
return process(data);
});
},
})
If i try only typeahead then it works fine. But does not work with bootstrap tagsinput.
In my application is use this awesome typeahead for a concat input. (Like the search in jira, where i have to input a attribute, a comparator (!=,=, >, ...) and suggest possible values)
But after selecting a value with from the suggestionlist, the lookup didn't get invoked and the new suggestion list does appear only after input changes.
Change:
keyup: function (e) {
switch(e.keyCode) {
case 40: // down arrow
case 38: // up arrow
case 16: // shift
case 17: // ctrl
case 18: // alt
break;
case 9: // tab
case 13: // enter
if (!this.shown) return;
this.select();
this.lookup(); // <-------- Insert this for additional lookup after selecting, if necessary
break;
case 27: // escape
if (!this.shown) return;
this.hide();
break;
default:
this.lookup();
}
<code>
In the minified file of the 3.0.5 release, the afterSelect option implementation is missing.
Im trying to change the limit of results in the auto-complete. But neither data-items="50" or the following code makes any difference:
$('.hometeam-autocomplete').typeahead({
highlight: true,
autoselect: true,
minLength: 0
}, {
items: 50,
name: 'Lag',
displayKey: 'name',
source: auto.ttAdapter()
}).on('typeahead:selected', function (e, item) {
// Callback if we want to do something when an item is selected
$('#hometeamUserId').val(item.id);
$('#hometeamname').val(item.name);
});
I'm wondering if there is a way to call the source with a json object with key value pairs? So that when you search the key will show up next to the value?
For example I have a set of movies and I want to be able to search actors, movie titles, and directors so I can pull all of these lists together with the appropriate key name ("movie","actor","director") and have it show next to the value in the dropdown?
Is this possible? I've tried to get it to accept JSON key value (and the json validates) but no luck.
There a a couple of syntax errors that prevent proper minification:
Please put your code through http://www.jshint.com to see those errors.
Twitter typeahead has been updated to 0.10.0.
hi
I can't find anywhere how to format json file, can you give an example?
Thanks!!
Manual escape or backspace key closes the autocomplete dropdown. Any quick workaround for it to work with search input's cancel button click event? So that it closes the dropdown when the cancel button is clicked. Currently when the button is clicked, the input gets cleared but the dropdown menu remains.
I can't make it run with data attributes.
<input type="text" name="nameserver1" id="nameserver1" placeholder="ns1" class="form-control force-selection" autocomplete="off"
data-provide="typeahead"
data-items="10"
data-minLength="3"
data-source='["ns1.vayeshost.com","ns25.turkishost.com","ns1.natrohost.com"]'
When the dropdown is show, one cannot enter "(" or ")" since inside move() it is interpreted as up or down arrow and default prevented.
Add a z-index to the dropdown by the typeahead class.
My server returns the data in two lines with this pattern Name<br /><small>address</small>
When the query is, for example, "br" the result appears like this Name<br />address because the matcher returns the following: Name<<strong>br</strong> /><small>address</small>
.
Is there any workaround to avoid this problem?
In Twitter Bootstrap there is support for multiple selections (See twbs/bootstrap#2007)
How can this be done here with Bootstrap-3-Typeahead?
There are no attributes or options like 'multiple' or 'delimiter'. Maybe something an be done with the available functions, but I don't know how...
If someone has an answer on this, please let me know!
Thx!
It would be great to have composer support.
https://getcomposer.org/
Composer support would allow to include and update bootstrap-3-typeahead in a php project very easy. There are a lot of javascripts which support composer (e.g. jquery, bootstrap, ....)
If you agree I would like to make a pull request.
I'm using the script inside an ASP.NET MVC5 web application, and when I start typing inside the input element that uses typeahead, I get the following message in the console:
it.toLowerCase is not a function
Any idea what the problem might be?
"There is no additional css required to use the plugin. Bootstrap's css contains all required styles in the .dropdownmenu class"
Shouldn't this be "dropdown-menu class" (with a hyphen)?
thanks!
(Just trying to debug missing dropdowns and this was added confusion)
Everything was fine when using local data.
But when I tried using AJAX to fetch results from the server like below it threw me the error. What's wrong?
$('.typeahead').typeahead({
source: function (query, process) {
return $.get('/typeahead', { query: query }, function (data) {
return process(data.options);
});
}
});
Default matcher is as below:
matcher: function (item) {
return item.toLowerCase().indexOf(this.query.toLowerCase());
}
if the query matches item at the first char e.g.
query = "a"
item = "abc"
indexOf
will return 0 (as -1 means not match)
However in this case, matcher
function will return 0 which is false after converted to bool
so the correct default matcher should be
matcher: function (item) {
return item.toLowerCase().indexOf(this.query.toLowerCase()) >= 0;
}
What do you think to remove e.stopPropagation() in keyup method ?
Because if somebody will need to listen keyup event
Hi. I use type ahead and i have a bloodhound datasource.
Into the dropdown, using a function into display key i display multiple rows
$('.select_product').typeahead(null, {
name: 'get-Products',
highlighter: 'product_name',
displayKey: function(e) {
var trow=
'<table style="width:100%">'+
'<tr>'+
'<td style="width:80%">'+e.product_name+'</td>'+
'<td style="width:20%">'+e.sku+'</td>'+
'</tr>'+
'</table>';
return trow;
},
source: getProducts.ttAdapter(),
templates: {
header: [
'<table style="width:100%">',
'<th>',
'<td style="width:80%">{{trans("quote.Name")}}</td>',
'<td style="width:20%">{{trans("quote.Sku")}}</td>',
'</th>',
'</div>'
].join('\n')
}
});
and i use highlighter as you can see above do display only that value.
Problem comes when you hid keydown because my text box is filled with the entire trow (all that html tag). What can i to solve in this way: when you press keydown the input box to be filled with the highlighter
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.