Outlook like autocomplete in Kendo UI
Hi, few days ago my friend asked me if I could help him with Kendo UI component that he needs to create.
- Autocomplete component where you write name of a person, and when you select this person, you will get person’s email
- You can also type free type emails, that are not in a list
- Emails are separated by semicolon
Create autocomplete using Kendo UI is simple. Problem was selecting a value and displaying something else.
In the end we came up with this solution:
First we define all the options for the autocomplete. seperator (semicolon), filter etc… In production you would get dataSource by ajax.
What is different here from normal autocomplete is that we define custom onSelect handler => addAutocomplete.
- get the name of dataValueField
- get the index by separator
- set new joined value based on index and dataValueField
You can find working example here.
Feel free to customize this example to your needs.
Kendo UI is really powerful framework with great components and high flexibility and I can only recommend it.