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

Highlight selected option inside the input field #138

Closed
nop33 opened this Issue Jan 12, 2016 · 4 comments

Comments

Projects
None yet
2 participants
@nop33

nop33 commented Jan 12, 2016

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

This comment has been minimized.

Owner

running-coder commented Jan 12, 2016

hey,

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

Thanks for the suggestion!

@nop33

This comment has been minimized.

nop33 commented Jan 13, 2016

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 running-coder added this to the backlog milestone Apr 6, 2016

@running-coder running-coder modified the milestones: 2.7.0, backlog May 10, 2016

@running-coder running-coder modified the milestones: backlog, 2.7.0 Jul 10, 2016

@running-coder running-coder referenced this issue Apr 3, 2017

Closed

Input Tags #335

running-coder added a commit that referenced this issue Sep 5, 2017

@running-coder running-coder added New Feature and removed Suggestion labels Sep 5, 2017

@running-coder running-coder modified the milestones: 2.10.0, backlog Sep 5, 2017

@running-coder

This comment has been minimized.

Owner

running-coder commented Sep 5, 2017

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 added a commit that referenced this issue Sep 7, 2017

Feature #138 improve multiselect option
Add async multiselect.data capabilities

running-coder added a commit that referenced this issue Sep 7, 2017

Version 2.10.0
Features
- #138 Add `multiselect` option
- #365 Add support for `disabled` items

Fixes
- #353 `group.template` as a string
- #367 isContentEditable always true on IE11

running-coder added a commit that referenced this issue Sep 7, 2017

Version 2.10.0
Features
- #138 Add `multiselect` option
- #365 Add support for `disabled` items

Fixes
- #353 `group.template` as a string
- #367 isContentEditable always true on IE11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment