Multi value selection

Autocomplete textbox enables you to select multiple items from the suggestion list. To achieve this, set the data-ej-enablemultiselect attribute to true. The data-ej-delimiterchar attribute holds a string value that specifies the separator between two selected items. You can customize the delimiter string. In this example “;” is used as delimiter.

  • HTML
  • <label>Select Contacts</label>
         <!-- Autocomplete control -->
    <input id="contacts" data-role="ejmautocomplete" data-ej-watermarktext="Search Contacts" data-ej-datasource="window.contacts" data-ej-fields-text ="name" data-ej-enablemultiselect=true data-ej-delimiterchar=";"/>


    The data-ej-delimiterchar is used to separate two or more items in the Autocomplete textbox. If you set data-ej-delimiterchar attribute, the selected value gets added in the textbox only after the delimiter character is placed. Default value is “,”.

  • HTML
  • <input id="autocomplete_sample" data-role="ejmautocomplete"  data-ej-enablemultiselect="true" data-ej-delimiterchar=";" data-ej-datasource="window.datasrc" data-ej-fields-text="name" />
  • JS
  • window.datasrc = [
    { 'name': 'Audi S6' },
    { 'name': 'Audi S7' },
    { 'name': 'BMW 7' },
    { 'name': 'Chevrolet Camaro' },
    { 'name': 'Duesenberg J' },
    { 'name': 'Elantra' }