Delete autocomplete suggenstions from the Dropdown

How Do I...
#1

Hi all,

Im looking to find a autocomplete plugin where i have the option to Delete the content in Autocomplete - so the list will be true dynamic
I have an application where i need to add entries on the fly if there is no entry found in autocomplete it will create a new entry - BUT i need a possibility to REMOVE that entry again without having to create a new form just to delete entries from the autocomplete list…

A bit like outlook where you have auto complete on mail addresses / contacts but there is a small X on the right of the mail address to purge it from the list

Is that at all possible?

#2

The built-in “tagging” feature does this automatically for multi-select lists. So if your list is multi-select, you’re all set.

If it’s a single-select then the tagging feature doesn’t display an “X” to remove the “added” items. In that case, a custom render template is your friend. You can use it to detect the “added” items in a couple of ways:

  1. Each <option> element added to your <select> by the “tagging” feature gets a data-select2-tag="true" attribute added to it. You can access the <option> element of each item passed to the custom render template via its option property.
  2. Each item passed to the custom render template function also has a _resultId property.

Either of these methods can be used to detect the items that were added to the list via the tagging feature, and your custom render template can display its own “X” control that the user can choose. You would need to write a function that would then remove that <option> element (see #1 above) from the underlying <select> and then trigger the select’s change event (which will force the Select2 widget to recognize that the option was removed).