1. Home
  2. Forum
  3. jQuery
  4. ejAutocomplete: Cannot add new if string matches partial

ejAutocomplete: Cannot add new if string matches partial

I've got an Autocomplete control on the page that accepts multiple values (using VisualMode). FilterType is set to "contains".

If the user wants to add a new item, but it is a substring of an existing item, they are not given the option to "Add New".


Using the code below, try to enter "Apple".

Result: The user must choose either "Green Apple" or "Red Apple", they can't add a new item, "Apple".

Expect: There should be an additional item, "Apple (Add New)" available for the user to choose.

How can I get the "Apple (Add New)" item to show up?


Code below is intended for https://jsplayground.syncfusion.com (https://jsplayground.syncfusion.com/x54lyihu)

<!doctype html>

<html>
<head>
    <title>Essential Studio for JavaScript : Autocomplete Default</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"  />
<link rel='nofollow' href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
    <link rel='nofollow' href="//cdn.syncfusion.com/17.1.0.38/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
    <link rel='nofollow' href="17.1.0.38/themes/web/content/default.css" rel="stylesheet" />
    <link rel='nofollow' href="17.1.0.38/themes/web/content/default-responsive.css" rel="stylesheet" />


<script type="text/javascript" src="//cdn.syncfusion.com/js/assets/external/jquery-1.11.3.min.js"></script>
    <script src="//cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="//cdn.syncfusion.com/17.1.0.38/js/web/ej.web.all.min.js"></script>
    <script src="17.1.0.38/scripts/web/properties.js" type="text/javascript"></script>


</head>
<body>
    <div class="content-container-fluid">
        <div class="row">
            <div class="cols-sample-area">
                <div class="frame">
                    <div class="control">
                        <input type="text" id="selectVeg" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" class="jsScript">
        $(function () {
            var vegList = [
                "Green Apple", "Red Apple"
            ];


             $('#selectVeg').ejAutocomplete({
               allowAddNew: true,
               multiSelectMode: ej.MultiSelectMode.VisualMode,
                width: "100%",
                watermarkText: "Select a vegetable",
                dataSource: vegList,
                enableAutoFill : false,
                filterType: ej.filterType.Contains
            });
        });
    </script>
</body>
</html>

6 Replies
BC Brian Cernoch February 23, 2022 09:45 PM UTC

This is targetting Essential Studio 17.1.0.38. Not sure why this is posting into the Javascript - EJ 2 forum.


KR Keerthana Rajendran Syncfusion Team February 24, 2022 01:51 PM UTC

Hi Brian, 
 
Thanks for contacting Syncfusion support. 
 
We checked the reported scenario “Cannot add new item if the string partially matches the existing item” with ejAutocomplete and currently this is the behavior of the control.  
 
However, we have overridden the default internal methods(“_valueToTextBox”, “ _showSuggestionList”) of ejAutocomplete to achieve your use case scenario.  
 
Refer to the sample link below. 
 
 
Please let us know if you need any further assistance. 
 
Regards, 
Keerthana R. 


BC Brian Cernoch March 10, 2022 03:04 AM UTC

That's definitely an improvement.

Couple of issues.

  1. Case insensitive searches highlight matching items fine, but still offer an "(Add New)" option.
    • Example: Type "green apple".
      • Result: "Green Apple" and "green apple (Add New)" are offered.
    • How can I prevent "green apple (Add New)" from being offered when there is an exact, case insensitive match?
      • Using the CaseSensitiveSearch property (true) doesn't really work here since "green apple" won't match "Green Apple". I need a way to prevent new items from being added that match existing items (in a case insensitive comparison).
  2. Enter "Green Apple" and choose the existing item. Now enter "Green Apples".
    • Result: "No suggestions" is displayed.
    • Expect: "Green Apples (Add New)" should be available.
  3. Enter "Broccoli" and click "Broccoli (Add New)". Enter "Broccoli" again.
    • Result: "Broccoli (Add New)" is offered again.
    • Expect: "No suggestions" should be shown.
      • It seems that the control doesn't validate against the AutoComplete's selected items as well as it's data source.

KR Keerthana Rajendran Syncfusion Team March 11, 2022 10:57 AM UTC

Hi Brian, 
 
As mentioned earlier, the requirement was achieved through sample level customizations. We are currently checking the feasibility to overcome your reported issue by making a custom sample for these scenarios and we will get back to you with further details on March 17, 2022. 
 
Regards, 
Keerthana R. 


KR Keerthana Rajendran Syncfusion Team March 21, 2022 12:59 PM UTC

Hi Brian, 
 
Query 1: Case sensitive search. 
 
Since we are overriding the existing filtering functionality of the ejAutocomplete control, we need additional time to achieve this scenario through sample customizations.  
 
We will get back to you with further details on or before March 25, 2022. 
Query 2 && 3: Enter "Green Apple" and choose the existing item. Now enter "Green Apples". “Broccoli” gets duplicated. 
We have achieved these cases through sample level customization. We have removed the condition to remove duplicates in the _checkEmptyList method to show “Green Apples”.  
To avoid the duplication of “Broccoli”, we have checked a condition based on the element value before adding new template in the _showSuggestionList method.  
 if(this._selectedItems.indexOf(this.element.val()) == -1)        this.suggestionListItems.push(this.element.val() + this._addNewTemplate); 
Please find the modified sample below. 
Regards, 
Keerthana R. 


KR Keerthana Rajendran Syncfusion Team March 28, 2022 08:04 AM UTC

Hi Brian, 

Thanks for your patience. 

Query 1: Case insensitive search. 
 
We have modified the sample by including customizations for the case sensitive suggestion list items in ejAutocomplete. Refer to the following code. 

ej.Autocomplete.prototype. _showSuggestionList = function (e) { 
                        var sugList, newText; 
                       if(this.model.loadOnDemand && $('body').find(this.suggestionList).length == 0) 
                         this._renderPopup(); 
                        this.suggestionListItems = this.model.enableDistinct ? ej.dataUtil.distinct(this.suggestionListItems, (typeof this.suggestionListItems[0] != "object" ? "" : (this.model.fields && this.model.fields.text) ? this.model.fields["text"] : "text"), true) : this.suggestionListItems; 
          .    .    .     .    .  .        .   . 
                            for(var i=0; i< $(this.suggestionList).find(".e-ul li").length ; i++) 
                                             { 
                                                sugList = $(this.suggestionList).find(".e-ul li")[i].textContent; 
                                               if(sugList.indexOf("Add New") != -1) 
                                                  newText = sugList.replace(this._addNewTemplate, "")                                                              
                                               if(this.suggestionListItems[0] && this.suggestionListItems[0].toLowerCase() ==  this.element[0].value && (this.suggestionListItems[1] && this.suggestionListItems[1].indexOf(this._addNewTemplate)))  
                                               //check whether the first item matches the search text, and the popup has add new template. 
                                               { 
                                               if(this.suggestionListItems[1].replace(this._addNewTemplate,"") == this.suggestionListItems[0].toLowerCase()) 
                                                            //check whether the first and add new text are same.                                     
                                                            {                                                            
                                                             this.suggestionListItems.pop() //remove the new text 
                                                            }                                                 
                                               } 
                                             } 
            if ((ej.isNullOrUndefined(newText)) && !this.noresult || this.model.showEmptyResultText ) 
                this._generateSuggestionList(e); 
        }; 


Please let us know if any concerns. 

Regards, 
Keerthana R. 


Loader.
Up arrow icon