Would it be possible for there to be an option for the first item to be automatically selected in the typeahead on search so a press of the enter key will go to that specific item's url? This would save the user needing to press the downarrow key to get to that first item and then pressing the enter key. Thanks!

This addresses https://github.com/twitter/typeahead.js/issues/62 -- letting you display some suggestions when the user has an empty search query. This behaviour is triggered by setting minLength to 0 for a dataset. This behaviour is especially useful to make a combo-box type input, and for smaller datasets.

Default suggestions only work if dataset has local or prefetched data, and an error is thrown if you try to set minLength to 0 for a remote-only data source.

By default, the order of the default suggestions is the same as the order the data is added. There could in theory be some inconsistencies in this ordering due to object key ordering not always being preserved, however these issues arise when mixing numeric and string keys, which will not be the case. My first version was actually storing this default ordering separately in local storage along with the data, but it seemed unnecessary.

There is also an option to define a sort function that will be used by javascript's built in Array.sort function. For example, to sort alphabetically:

$('#country-typeahead').typeahead([{
  name: 'countries',
  prefetch: '/api/countries.json',
  minLength: 0,
  defaultSort: function(a,b){ return a.value > b.value ? 1 : -1; }
}])

I opted to make the user add the .value in their function in case they want to sort by a custom property in their datums.

For anyone interested until an example is added to documentation for custom events...

Assuming there's an input on your page called 'search_input':

$('#search_input').bind('typeahead:selected', function(obj, datum, name) {      
        alert(JSON.stringify(obj)); // object
        // outputs, e.g., {"type":"typeahead:selected","timeStamp":1371822938628,"jQuery19105037956037711017":true,"isTrigger":true,"namespace":"","namespace_re":null,"target":{"jQuery19105037956037711017":46},"delegateTarget":{"jQuery19105037956037711017":46},"currentTarget":
        alert(JSON.stringify(datum)); // contains datum value, tokens and custom fields
        // outputs, e.g., {"redirect_url":"http://localhost/test/topic/test_topic","image_url":"http://localhost/test/upload/images/t_FWnYhhqd.jpg","description":"A test description","value":"A test value","tokens":["A","test","value"]}
        // in this case I created custom fields called 'redirect_url', 'image_url', 'description'   

        alert(JSON.stringify(name)); // contains dataset name
        // outputs, e.g., "my_dataset"

});

https://github.com/twitter/typeahead.js#custom-events

I was pretty conservative with what custom events I added in v0.9.0, now it's time to get a little crazier. Below is a combination of events I think would be nice to have and some events I've seen people asking for:

• autocompleted – when the user tabs to select the suggestion the hint is showing.
• rendered – suggestions for a given query were retrieved and rendered.
• prefetch failed – requesting or processing the prefetched data fails for whatever reason.
• nothing left – no suggestions were found for a given query.
• suggestion highlighted – the user mouses or keys over a suggestion in the dropdown menu.
• changed – emulate the native change event of an input element.

I'm not sure implementing all of these is plausible, but I at least wanted to document them so a discussion could be had.

Any other custom events you'd like to see implemented?

First off, thanks for this library, it's just great.

I wonder whether it's possible to catch an event to show a spinner or something or the screen in the meantime the browser is waiting for the server to reply.

Thanks!

There's a handful of issues asking for something along the lines of a "selection callback". While I agree this is necessary, I don't think adding an option like onSelection is the best way to go about it. Instead, I think triggering custom events on the typeahead input is the way to go. It's a more extensible approach and it won't pollute the options hash.

I'm creating this ticket to start brainstorming what events we need to trigger. The only 2 I can think of right now are:

• suggestion selected (#22)
• prefetched data loaded (#64)

If there's anything else you'd like an event triggered for, leave a comment in this issue.

You can see this with the best pictures example here

Start typing 'broadway' (pre 1960 example that is not prefetched). At 'bro' it will be isolated from prefetched data. then each additional letter ('a', 'd', ...) will close + reopen dropdown with same value.

A method for clearing the dataset cache or changing its context from page level to element level would be useful. For larger/long running applications, the page-level cache behavior can be unexpected and undesirable. Providing away to override this, or at least programmatically clear the cache on demand would be helpful. For more justification please see my comment at the bottom of issue #41.

In the era of browserify and commonJS it makes sense to publish also front-end-only packages on npm.

• npm stores the tagged versions on it's own servers
• when managing dependencies, i'd rather manage them all in npm (most of the dependencies I use are already on npm)
• it's nice to have the option, isn't it?

Hello,

I'm not sure how the .typehead("open") works. My minLength setting is set to 0. What I want is to make the dropdown appear (especially when empty) without typing anything not only when the input is focused and I push up/down arrows but also when I click the input with mouse. I created a simple fiddle to illustrate what my goal is: http://jsfiddle.net/YxmF2/. When you click on the input, you should get the dropdown appear.

If this is intented to be like this, then what's the purpose of .typeahead("open") ? And if so, is there a way to do what I want to do?

Is there a way to get an event when the user "selects" the text that they have typed out, which is separate from the offered suggestions? I.e. user has typed 'apple', with provided suggestion 'applesauce'; however user really wants to submit simply 'apple'.

Originally I tried using the 'change' event for this:

    }).on('typeahead:selected', function($e, datum) {  // suggestion selected
          console.log('selected: ' + datum['url']);
          window.location = datum['url'];
    }).on('change', function(e) {                     // user typed their own value
          value = $('input.search-input').val();
          window.location = '/search_path?search=' + encodeURIComponent(value);
    });

but unfortunately 'change' also seems to fire when the user selects from the drop-down, so if the user types 'apple' and then clicks 'applesauce' there's a kind of race condition where sometimes the form submits 'apple' and sometimes 'applesauce', depending on the speed of the remote.

Describe the bug Search is returning a 404 due to proxy heroku site https://typeahead-js-twitter-api-proxy.herokuapp.com/demo/search?q= currently down

To Reproduce Steps to reproduce the behavior:

1. Search for any account
2. See error

Expected behavior Fetch call should return 200 and search results should load

Hello, is it possible to get the name of the data set when using multiple data sets? I want to do something different on select based on which data is being used. Below is my typeahead code, the data is being sent through json using bloodhound.

For instance if it's coming from the providers I want it to return the "name" providers

Thank you!

$('.n-search-all').typeahead({ highlight: true }, { name: 'providers', display: 'text', source: nSearchProviders, templates: { header: '<h3 class="n-search-cat-name">Providers</h3>' } }, { name: 'locations', display: 'text', source: nSearchLocations, templates: { header: '<h3 class="n-search-cat-name">Locations</h3>' } }, { name: 'services', display: 'text', source: nSearchServices, templates: { header: '<h3 class="n-search-cat-name">Services</h3>' } });

I am searching string but not showing string with parenthesis. I used remote properties.

var setting_info = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('search_name'), queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { ttl: 1, url: "{{ route('setting_info',[app()->getLocale()]) }}?query=%QUERY", wildcard: '%QUERY', } });

Please help me. how to load string + parenthesis + remote combination?

Why is it that every time I finish typing in tagsinput (focus out of the text area), duplicates always appear in plain text on the form as shown in the image/video below.

https://user-images.githubusercontent.com/49072140/178454846-8b70f501-f953-430b-8783-d91c70b84407.mov

Describe the bug Suggestions not showing inside Table Row

As you can see in the below screenshot whenever I click on Add Dependents it would dynamically add a table row as shown in the screenshot. Inside the screenshot you can also see that when I type A the console does output 4 suggestions but it is not being displayed or rendered in the browser.

Moreover when the user taps Add Dependents this is the code which gets called.

var i = 0;
$("#add-dependent-button").click(function (e) {
    document.getElementById("dependentTable").style.display="block";
    ++i;
    $("#dynamicAddRemove").append('<tr><td><input class="typeahead2 form-control" type="text" name="dependents[' + i +
        '][client_id]" placeholder="Start typing name..." required"/></td><td><select class="form-control" id="relationship" name="dependents['+i+'][relationship]">@foreach($relationships as $relationship)<option value="{{$relationship->id}}">{{$relationship->relation}}</option>@endforeach</select></td><td><button type="button" class="btn btn-outline-danger remove-input-field">Remove</button></td></tr>'
    );
    $('input.typeahead2').typeahead({
        source:  function (query, process) {
            console.log(`${query}`);
            return $.get(path, { query: query }, function (data) {
                console.log(`${data}`);
                return process(data);
            });
        }
    });
    e.preventDefault();
});

I am using bootstrap and Laravel.

Appreciate your help!