typeahead: add "selected" custom event

[evil-shrike]

I need to handle a case when a user selects an options from dropdown menu. I need to distinguish entered text and chosen from dropdown menu. It's imposible without the custom event.

, select: function () {
  var val = this.$menu.find('.active').attr('data-value')
  this.$element.val(val)
  this.$element.change();
  this.$element.trigger("selected");    // <- ADD THIS
  return this.hide()
}

[fat]

change is an event :)

[evil-shrike]

No. "change" is an event when something has changed in input box. But I need to distinguish cases when something is being entered in input and was chosen from dropdown menu.
Here's a real case:
Given a control for choosing a country. After entering two symbols a menu with country list is shown. But an application need to react not on entering some symbols in an input (i.e. on "change" event) but on a choice of some country from the list (i.e. on "selected" event).

p.s. please let me know if I couldn't describe my idea well

[fat]

no - change is being manually triggered: this.$element.change()

[evil-shrike]

right - change is being triggered in select method manually but is also triggered by input itself. And in my callback subscribed on the event I can't see difference between "change" from "select" method and "change" from DOM/jQuery.

[fat]

i think you should listen to blur for your case above

[evil-shrike]

How can blur help? In blur-handler I can get value from input but I can't be sure that it's was chosen from the list.
I'm trying to say that "autocomplete input" can be used in different cases:

• input is master and autocomplete menu is just a helper
• input is just a helper for choosing from master menu

In the latter case we need a separated event for selecting a value from the list.

[fat]

Blur could help - if you're waiting for a user to complete what they intend on inputing. But if you're really set on adding this event i'm open to it.

You'll want to reopen a pull request against 2.0.3-wip though - and add preventDefault support (like this: https://github.com/twitter/bootstrap/blob/2.0.3-wip/js/bootstrap-modal.js#L45)

You'll also need a test and docs. thanks!

[evil-shrike]

Here's the pull request: #3158 (tests and docs are included).
I didn't build docs, only changed mustache template, is it right?

[finom]

To make custom events for typeahead you can use my thing: https://github.com/finom/Functions/tree/master/FunctionCallEvent#why-is-it-needed

[grantzau]

The "selected" event would be useful in some cases. It often makes a difference, wether the user did select input from the typeahead list, or manually wrote some random input. But the "change" even fires in both cases.

A simple/hack way to tell the difference using the "change" event would be:

$(".typeahead").on("change", function (e) {

    if (!e.originalEvent) {
        // the change event was manually triggered
    }
})