bassjobsen/bootstrap-3-typeahead

The Typeahead plugin from Twitter's Bootstrap 2 ready to use with Bootstrap 3 and Bootstrap 4

bootstrap-3-typeahead's Issues

issue with data-source attribute

When using the data-source attribute, typeahead takes it as a literal source.

example

<script> function getData(query, process) { //debugger; return ['test', 'abc', 'super']; } </script>

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 });

Select first value

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

Problem with on Key down

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

Very minor documentation change - "dropdown-menu class"

"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)

'delay' option not documented

You should add the 'delay' option in your documentation

make show all button

data-items attribute has no effect

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);
        });

Key up event for multibyte environment.

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.

Search input - close dropdown on cancel button click

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.

http://jsfiddle.net/923s9c5r/2/

Bloodhound source doesn't appear to work

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

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.

Highlighting tags within text

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?

There's a way to disable auto-lookup?

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?

Scrollable element the placement (height) of the typeahead dropdown is calculated wrong

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

typeerror typeahead.process is not a function

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.

Fill other field with updater

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.

it.toLowerCase is not a function

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?

Multiple sources/JSON Object?

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.

put UL in DIV

make scroll to list

i need container with scroll

Thx

Add ability to turn typeahead autoselect off.

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

The z-index will be needed when using typeaheads input in a modal

Add a z-index to the dropdown by the typeahead class.

Default matcher does not work as expected if the query matches the source at the first char

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;
    }

Register with bower

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

problem in matcher

hi i have a problem with a object collection via ajax.
, matcher: function (item) { return ~item.toLowerCase().indexOf(this.query.toLowerCase()); }

form elements show up on top of typeahead in iPad

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

update to support Twitter Typeahead 0.10.0

Twitter typeahead has been updated to 0.10.0.

Update bower version.

Compser support

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.

Syntax errors

There a a couple of syntax errors that prevent proper minification:

Please put your code through http://www.jshint.com to see those errors.

onchange event get's just triggered when an item is selected

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();
}

Suggestionlist doesn't appear, when selecting a value per enter

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>

On mouse hover on drop list it just got disappear.

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);
                }
            });
        });

json format

hi

I can't find anywhere how to format json file, can you give an example?

Thanks!!

Multiple selections

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!

How to use source callback ?

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

Feature request: Ability to custom render an item

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.

console.log in bower v3.0.3

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(); 
          }
      }
    }

Minified file doesn't include afterSelect option

In the minified file of the 3.0.5 release, the afterSelect option implementation is missing.

Use versioning more frequently

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?

Does not work within Modal

When inside a modal, it does not work, both when I initialize it first, or after the modal.

Keyup remove e.stopPropagation()

What do you think to remove e.stopPropagation() in keyup method ?
Because if somebody will need to listen keyup event

Problem in Mozilla FireFox 25+

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 ^_^

not clear how to include bloodhound

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

minLength not working with data attributes

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"]'

To create a stable release with composer.json

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.

Menu closes itself when moving mouse from <li> to next <li>

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));

Links broken in the Download section

Both links in the Download section are broken.

Uncaught TypeError: ... has no method 'toLowerCase'

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);
        });
    }
});

Unbind keypress,keydown, keyup on typeahead("destroy");

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');

Cannot enter left or right parenthesis when the dropdown is shown

When the dropdown is show, one cannot enter "(" or ")" since inside move() it is interpreted as up or down arrow and default prevented.