Add text dynamically in ASP.NET MVC Autocomplete control.

Description

To add a new item to the ASP.NET MVC AutoComplete control, use the AllowAddNew and AddNewText APIs. The AllowAddNew is used to allow or restrict the Autocomplete control from adding a new item to the list. It accepts Boolean value. By default, the value of the AllowAddNew property is false. You can set it to true to add a new text in the Autocomplete control. The AddNewText API is used to add a new item to the list items. It accepts String value. By default, the value of the AddNewText API is Add New.

Solution

To add a new text in the Autocomplete control, enable AllowAddNew API, which allows you add a new text to the Autocomplete text box. After setting the AllowAddNew API to true, add new text using the AddNewText API.

This new text will be added to suggestions for only one time. If you remove this newly added item, it will not be present in the suggestions. Hence, you need to add this new item to the datasource if you want this to be visible again in the suggestion list.

 
 
@Html.EJ().Autocomplete("selectcar").Width("205").FilterType(FilterOperatorType.Contains).AutocompleteFields(af=>af.Text("Name").Key("Id")).Datasource((IEnumerable<CarsList>)ViewBag.datasource).ShowPopupButton(true).AllowAddNew(true).AddNewText("Enter new text").MultiSelectMode(MultiSelectModeTypes.VisualMode).ClientSideEvents(ce=>ce.Select("onSelect"))
 
 
    <script type="text/javascript" >
 
        function onSelect(args) {
 
            if (args.text.indexOf('Enter new text') >= 0) { // check whether it is new word or not
                var newvalue = args.text.replace('(Enter new text)', ''); // get that new word          
                this.model.dataSource.push({ Name: newvalue.trim(), Id: Math.floor((Math.random() * 10) + 1) });  // push that new word in the Autocomplete datasource           
            }
 
        }
 
    </script>
 
 

The sample has been attached for adding text in the Autocomplete control, and it can be downloaded from the following link: Sample

In the attached sample, the AllowAddNew and AddNewText APIs have been included. When you type the text that does not present in the list, it shows the text given in the AddNewText API.

After selecting the entered text in the Autocomplete popup, it is added in the Autocomplete control as shown in the following screenshot.

If you remove this item and search again this new word, it will be shown in the suggestion list since it has already been added in the data source.

Thus, you can add new text in the Autocomplete control dynamically.