Highlight selected option inside the input field

[nop33]

Hello,
This is more of a suggestion/feedback than an issue.
Lately I have been working with your library and I can see that you are very active in this repository, so I would like to ask your opinion about a new feature.
One of my requirements is to build a Facebook-like highlighting of the selected option of the typeahead field. I think the following images are pretty self explanatory:

Opening the typeahead dropdown:

Selecting the first option will highlight the keyword inside the input field:

The way I have implemented this, is by adding a <span class="highlighter"> element with position: absolute over the input field, initially hidden. Then, at the callback onClickAfter I update the text of the aforementioned .highlighter element to match the selected option and I make it visible.
When the user clicks onto the input field again, the results list appears and the '.highlighter' gets hidden again in order to display the text value of the input field.

Is this feature something you are considering adding in your library? Cheers!

[running-coder]

hey,

something like select2 is doing (they call it tags)?
could be interesting for a future version...

Thanks for the suggestion!

[nop33]

Yes, something like that, but a bit more simplified, for instance there no need for multiple tags. But yes, the idea is to make clear to the user whether they have chosen a predefined option or a custom option.

[running-coder]

Multi select is now enabled on the develop branch. You can look at hockey_v2 demo to get a configuration example. It is to be documented properly on the website once 2.10.0 is ready.

multiselect: { // Set to true for a basic multiselect
  limit: 2, // Optional limit of items to select
  limitTemplate: 'You can\'t select more than 2 items', // template when the limit is reached
  matchOn: ["id"], // unique item identifier to remove an item from the result list when selected (use any of the item key), by default a JSON of the item will be used
  href: '/item/{{id}}', // add a link on the multiselect item, can be a function
  data: [...], // default items when Typeahead is loaded
  callback: {
    onClick: function (node, item, event) {},
    onCancel: function (node, item, event) {}
  }
}

Feel free to test and give some feedback at it might need some tweaking.

[running-coder]

demo: http://www.runningcoder.org/jquerytypeahead/demo/#form-hockey_v2
documentation: http://www.runningcoder.org/jquerytypeahead/documentation/#options-multiselect