)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add text dynamically in the Autocomplete control when it is not present in the suggestion list?

Platform: ASP.NET MVC |
Control: AutoComplete |
Published Date: May 5, 2015 |
Last Revised Date: May 8, 2019

Description

To add a new item to the 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>
 
 

 

Note:

AddNewText can be used in the Visual mode only.

 

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.

 

Entering new text

 

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

New text added

 

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.

Text added to suggestion list

 

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

2X faster development

The ultimate ASP.NET MVC UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Chris Morris
Feb 14, 2018

How do you prevent duplicates from coming up in the list when you have Allow Add New in there along with Multiple values?

Reply
Dan
Nov 27, 2018

The attached Sample is no longer available.

Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon