New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Example of typeahead:selected event #300

Closed
andy3rdworld opened this Issue Jun 21, 2013 · 39 comments

Comments

@andy3rdworld

andy3rdworld commented Jun 21, 2013

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

@jharding

This comment has been minimized.

Contributor

jharding commented Jun 26, 2013

What would be even better would be a pull request that added this to the README 😄 see #174.

@jharding jharding closed this Jun 26, 2013

@Cahl-Dee

This comment has been minimized.

Cahl-Dee commented Aug 8, 2013

Agreed, this should be in the README

@aDaneInSpain

This comment has been minimized.

aDaneInSpain commented Sep 10, 2013

Yup, please add this to the documentation.

@digz6666

This comment has been minimized.

digz6666 commented Sep 11, 2013

Thanks, been looking for this :)

@missinglink

This comment has been minimized.

missinglink commented Sep 12, 2013

Yea, thanks, found this via google after finding docs insufficient.

@dgbrunoh

This comment has been minimized.

dgbrunoh commented Oct 22, 2013

Nice.... why this is not in the documentation yet?

@pouipouidesign

This comment has been minimized.

pouipouidesign commented Oct 24, 2013

Wow, been fighting with this thing, thanks A LOT for the info!

👍 to add it to the readme

@missinglink

This comment has been minimized.

missinglink commented Oct 24, 2013

@pouipouidesign I've forgotten what this was about aready ;) Can you please spend 5 mins to edit the README & any examples and do a PR?

@pouipouidesign

This comment has been minimized.

pouipouidesign commented Oct 24, 2013

I will, but over this w-e as I'm in the middle of a sprint of a sort (hence my relief at findings this).
I'll just have to pester my husband for info about doing a PR, as I've never done it before :)

@Cahl-Dee

This comment has been minimized.

Cahl-Dee commented Oct 24, 2013

I understand that when jharding and I first commented this example didn't have enough attention to make its way to the README, but it's about time it does so, no?

@missinglink

This comment has been minimized.

missinglink commented Oct 24, 2013

@pouipouidesign I'd be happy to help, I just forgot about the context & don't feel I could correctly represent the issue any more. If you need any help with the PR let me know. I'm insertcoffee on twitter.

Alternatively can people put some info in the comments here and I will compile it in to a PR.

@etiennechabert

This comment has been minimized.

etiennechabert commented Oct 27, 2013

Lot of things will be appreciated in the README and in the exemples like valueKey or tokens usage

@antimony

This comment has been minimized.

antimony commented Oct 31, 2013

There is one more parameter in callback function - dataset name. Can you add it to your example?

@ptoly

This comment has been minimized.

ptoly commented Oct 31, 2013

Thanks so much! Just what I needed.

@andy3rdworld

This comment has been minimized.

andy3rdworld commented Nov 2, 2013

@antimony Added dataset name parameter, thanks.

@pouipouidesign

This comment has been minimized.

pouipouidesign commented Nov 6, 2013

I haven't forgotten to do this, just been swamped.
Have good hope of doing it this w-e.
Sorry for the delay.
If anyone wants to do it faster, please do :)

@wallter

This comment has been minimized.

wallter commented Feb 11, 2014

As a note, I have not been able to find documentation on this and had to add a .off('blur') to the stack to make sure the value does not revert to the selected value.

 $('.user-typeahead').typeahead({
    remote: '/ajax_user_typeahead?query=%QUERY''
}).bind('typeahead:selected', function(obj, selected, name) {
    if (selected.value.toString().split('-').length > 1) { /* "name - email@email.com" */
        $(this).val(selected.value.toString().split('-')[0].replace(/^\s+|\s+$/g, '')); /* split, select, trim */
    }
    return false; /* didn't do anything, maybe not necessary */
}).off('blur');
@jharding

This comment has been minimized.

Contributor

jharding commented Feb 11, 2014

@wallter if you went to set the value of the typeahead input control, use jQuery#typeahead('val', yourVal). See https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#jquerytypeaheadval-val

@rohan-deshpande

This comment has been minimized.

rohan-deshpande commented Feb 26, 2014

I'm trying to get the val of the typeahead instance on selected but I keep getting undefined

$(scope.conf.field).on('typeahead:selected' , function(e,s,d)
{ console.log($(scope.conf.field).typeahead('val'); });

This keeps returning undefined. Anything else inside that event happens fine, just returns undefined for the value of typeahead. Not sure what I've done wrong...

@jharding

This comment has been minimized.

Contributor

jharding commented Mar 7, 2014

Any reason why you're trying to get the value that way rather than getting it from the suggestion object passed to the event handler i.e. the s argument in your sample code?

@rohan-deshpande

This comment has been minimized.

rohan-deshpande commented Mar 8, 2014

That's a good point, I got it working now by using $(this) instead (not entirely sure why that works as it SHOULD be equivalent to what I was selecting previously) but yeah, I should be using s.

@maanasa

This comment has been minimized.

maanasa commented Mar 22, 2014

With the above method I get a "Supplied parameters do not match any signature of call target: Call signatures of types '<obj: any, datum: any, name: any> => void' and '<eventObject: JQueryEventObject> => any' are incompatible. Call signature expects 1 or fewer parameters" error.

Here is my code - $("input[name='myTypeAhead']").bind("typeahead:selected", function(obj, datum, name) {
console.log("selected");
});

Any idea what am doing wrong here?

@aaron-nunley

This comment has been minimized.

aaron-nunley commented Apr 18, 2014

@maanasa Give this a shot? Looks like you were binding to the input field itself rather than the typeahead object.

$('#field_id').typeahead({
  highlight: true
},
{
  name: 'first_dataset',
  displayKey: 'name',
  source: first_dataset.ttAdapter(),
  templates: {
    header: '<b>first_dataset</b><hr />'
  }
},
{
  name: 'second_dataset',
  displayKey: 'name',
  source: second_dataset.ttAdapter(),
  templates: {
    header: '<b>second_dataset</b><hr />'
  }
}).bind("typeahead:selected", function(obj, datum, name) {
console.log(obj, datum, name);
});
@ElyeM

This comment has been minimized.

ElyeM commented Jun 26, 2014

Tnx loads, was looking for this.

@HiteshDhanwani

This comment has been minimized.

HiteshDhanwani commented Dec 31, 2014

Hey!
how to display some default datasets just on clicking mouse on textbox using typeahead.js?

@LukasCamera

This comment has been minimized.

LukasCamera commented Jan 12, 2015

@HiteshDhanwani There's already an issue #798. Here's a working fiddle, but I couldn't get it working using Bloodhound as engine.

@andfelzapata

This comment has been minimized.

andfelzapata commented Feb 23, 2015

Excellent, thanks man !! :) 💯

@jamesrichards

This comment has been minimized.

jamesrichards commented Apr 22, 2015

Exactly what I was looking for - why is this not in the docs under custom events? There's no example available.

@allesan

This comment has been minimized.

allesan commented May 27, 2015

Am I wrong or this is not working anymore?

@aroraumang

This comment has been minimized.

aroraumang commented Jun 2, 2015

Thanks man.

@fertobar

This comment has been minimized.

fertobar commented Jul 3, 2015

+1

@mtzmedia

This comment has been minimized.

mtzmedia commented Jul 7, 2015

Since the "overhaul" of typeahead, typeahead:select no longer defines the dataset name. Anyone know how to get the dataset on the select event?

@ZaneCEO

This comment has been minimized.

ZaneCEO commented Jul 10, 2015

I was banging my head against the wall so... please note that now the event is "typeahead:select" and NO LONGER "selected".. after this, the original example still works and is the correct way to do it, thanks!

@oshihirii

This comment has been minimized.

oshihirii commented Jul 23, 2016

I am getting: TypeError: cyclic object value from:

.on('typeahead:selected', function(obj, datum, name) { 
console.log(JSON.stringify(obj));
console.log(JSON.stringify(datum));
console.log(JSON.stringify(name));

typeahead.bundle.min.js at v0.10.5.

@DMeganoski

This comment has been minimized.

DMeganoski commented Dec 20, 2016

+1 to @mtzmedia question. I need to determine which dataset the selection belongs to. I can't seem to find this information anywhere. I got my hopes up seeing this example, only to realize this is an old thread and the name is no longer an argument. Anyone know of another way?

@mlosavio

This comment has been minimized.

mlosavio commented May 31, 2017

Hi,
I'm trying to use this hint but without success. The typeahead selector works perfectly (it's a multi-dataset typeahead) but no events are fired.

The following is the HTML part:

<div id="namelist">
		  <input class="typeahead" id="searchinput" type="text" placeholder=" search a name..." style="padding:3px">
		</div>

and this is the javascript part to bind the selected event but it doesn't fire anything.

$('#namelist .typeahead').bind('typeahead:selected', function (obj, datum, name) {
			alert(JSON.stringify(obj)); 
			alert(JSON.stringify(datum)); 
			alert(JSON.stringify(name)); 
		});

I have also tried to reference directly the input:

$('#searchinput').bind('typeahead:selected', function (obj, datum, name) {
			alert(JSON.stringify(obj)); 
			alert(JSON.stringify(datum)); 
			alert(JSON.stringify(name)); 
		});

Nothing.

Any help?

thanks.

@DMeganoski

This comment has been minimized.

DMeganoski commented May 31, 2017

@mlosavio see ZaneCEO's comment above.

@mlosavio

This comment has been minimized.

mlosavio commented Jun 1, 2017

nothing, it doesn't work.
I'm sure I'm missing something...
Is there anyone who could post a full example please?

thanks.

@ivanchaer

This comment has been minimized.

ivanchaer commented Feb 24, 2018

Try:

  • focus.bootstrap3Typeahead
  • blur.bootstrap3Typeahead
  • keypress.bootstrap3Typeahead
  • propertychange.bootstrap3Typeahead input.bootstrap3Typeahead
  • keyup.bootstrap3Typeahead

Like:

$('input.typeahead').typeahead({...}).bind('keyup.bootstrap3Typeahead', function(event, dataset_selected_Item, dataset_name) {
    console.log('keyup');
  });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment