AEM6.3 Autocomplete with smart search for touch ui

[srinivas_chann1]

Hi,

I have the below autocomplete tag getting populated in the touch ui ,but it is not of smart search and have to type in full tag path.Similar to that is mentioned in AEM6.3 Touch ui autocomplete not working for tags for namespaces

When i type in any particular tag it does not show any reference at all. Even though the tag is present. So it the full tag name that appears is Content tag: checking / abc.  I need to type in the full tag Content tag: checking / abc  only then it filters .I need some thing like if i type in abc it must show up the tag

Things i tried:-

I tried with adding mode="contains" but does not effect the search. Please let me know  if i could customize any files that will solve this problem.

<tag

         jcr:primaryType="nt:unstructured"

         sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete"

         fieldLabel=" Asset Tags"

          multiple="{Boolean}true"

         name="./assetTags"

         mode="contains">

          <datasource

           jcr:primaryType="nt:unstructured"

           sling:resourceType="cq/gui/components/common/datasources/tags"/>

          <options

           jcr:primaryType="nt:unstructured"

           sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete/list"/>

          <values

           jcr:primaryType="nt:unstructured"

           sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete/tags"/>

                                    </tag>

Thanks

[srinivas_chann1]

I tried below but does not have any effect on touch ui autocomplete. Please let me know i  missed out any thing

Under the file

/libs/clientlibs/granite/coralui3/js/CUI.Autocomplete.js

By default, "mode" is set to "starts", i changed it to "contains" but still the touch ui autocomplete is not providing an smart search and need to type all the required text

defaults: {

      mode: 'contains', // filter mode ['starts', 'contains']

      disabled: false,

      ignorecase: true,

      delay: 200,

      multiple: false,

      forceselection: false,

      selectlistConfig: null,

      tagConfig: null,

      // @warning do not use this

      //

      // future feature

      // allows to bypass element search and pass elements

      // will allow to evalute this solution

      predefine: {}

    },

[srinivas_chann1]

Any inputs from any one my above query will helpful.

[arunpatidar]

Hi,

That is OOTB functionality.

You can write your own filter e.g.

https://blogs.perficientdigital.com/2019/05/03/how-to-add-a-filter-to-aem-granite-select-widget/

[srinivas_chann1]

Hi,

Thanks a lot for your inputs . I copied the script and added it under categorizes="[cq.authoring.dialog]" .But when i tried the smart search under autocomplete of above dialog code it does not still do smart search .

Also the dialog is not closing when i click the [x] on the dialog window.

Please let me know how could i solve it.

[arunpatidar]

Hi,

This code is for not autocomplete instead of select type. I shared this for your reference you can get the part of the script which does filtering.

[srinivas_chann1]

Hi,

I did the below but still it does not show up smart search on autocomplete .Any inputs on this will help.

Step1:-

I added an granite:id to tag xml i.e granite:id productTagListTagcomp

Step2:-

Noticed that from OOTB mechanism that when some types in any key it  adds the below class in

a> in "ul js-coral-Autocomplete-selectList"  it adds  class "is-visible"

b>in "li" it adds class "is-hidden"  for the items not to display

Step3:-

I added the below custom code

$('#productTagListTagcomp input[type=text]').bind('keyup', function(e) {

var filterText=$(this).val();

hidedisplayselection(filterText);

});

function hidedisplayselection(filterText){

var diaplaytheselectList=false;

$('#productTagListTagcomp li').each(function(index){// id of ul

var itemText=$(this).text();

var bothNotEmpty = itemText && filterText;

var match =       bothNotEmpty  &&   itemText.toLowerCase().includes(filterText.toLowerCase());//check if it contains

var eitherIsEmpty = !itemText || !filterText;

$(this).addClass("class", "is-hidden");//first hide the class

if (eitherIsEmpty || match) {

console.log("here show il text");

$(this).removeClass('is-hidden'); //if match then show the class

     diaplaytheselectList=true;

    }

});

//we add class in select list so that it shows the list in the selection pop up

if(diaplaytheselectList){

$('#productTagListTagcomp ul').find('.js-coral-Autocomplete-selectList').addClass("class","is-visible is-above");

}

}

Step4:- I noticed that it hits the console log but does not remove the class "is-hidden" and also neither adds the class "is-visible is-above" . I am thinking may be the OOTB code is blocking from this happening.

Please needs your inputs as how could i proceed based on my above finding.

Thanks

[arunpatidar]

Yes, This can be possible. you can add a delay of 100 ms to delay your event execution and please exclude OOTB filter match criteria as well.

e.g. you can just type below code in console and type input text(not very fast), this will filter the option.

$(document).on("keyup", "#productTagListTagcomp div>input.js-coral-Autocomplete-textfield", function() {

    applyFilter($(this).val().toLowerCase(), $("ul.js-coral-Autocomplete-selectList.coral-SelectList li"));

});

function applyFilter(txtVal, filterList) {

    filterList.each(function() {

        if ($(this).text().toLowerCase().indexOf(txtVal) > 0) {

            setTimeout(() => {

                    $(this).closest('ul').addClass("is-visible").addClass("is-below");

                    $(this).removeClass("is-hidden", false)

                },

                100);

        }

    });

}

[srinivas_chann1]

Hi,

Thanks for the inputs .Now the smart search works .But i noticed 2 issues on the above.

1>The class "is-visible" must be added after "is-hidden" is completed so did the below change and then the pop up with list came up on smart search. Please let me know if you see any change in the below code to make it look better

$(document).on("keyup", "#productTagListTagcomp div>input.js-coral-Autocomplete-textfield", function() {

    applyFilter($(this).val().toLowerCase(), $("ul.js-coral-Autocomplete-selectList.coral-SelectList li"));

});

//apply "is-hidden" class first

function applyFilter(txtVal, filterList) {

    filterList.each(function() {

        if ($(this).text().toLowerCase().indexOf(txtVal) > 0) {

            setTimeout(() => {

$(this).removeClass("is-hidden", false)

                },

                100);

     }

    });

//apply "is-visible" class latter

filterList.each(function() {

        if ($(this).text().toLowerCase().indexOf(txtVal) > 0) {

            setTimeout(() => {

                    $(this).closest('ul').addClass("is-visible").addClass("is-below");

                },

                100);

        }

    });

}

}

2> After we select an option from select the pop up  still stays .That will cause an issue with usability of autoselect.

i noticed that in normal OOTB behavior once we select an option then ""is-visible" is removed and the popup hides immediately.

Please could you provide inputs  as how this could be achieved on selection on option from select will be very helpful.

Thanks

[arunpatidar]

This works for me only one issue is with backspace no filtering

$(document).on("keyup", "#productTagListTagcomp div>input.js-coral-Autocomplete-textfield", function() {

    applyFilter($(this).val().toLowerCase(), $("ul.js-coral-Autocomplete-selectList.coral-SelectList li"));

});

function applyFilter(txtVal, filterList) {

    filterList.each(function() {

        if ($(this).text().toLowerCase().indexOf(txtVal) > 0) {

            setTimeout(() => {

                    $(this).removeClass("is-hidden", false)

                    $(this).closest('ul').addClass("is-visible").addClass("is-below");

                },

                100);

        }

    });

}

$(document).on("click", "#productTagListTagcomp ul.js-coral-Autocomplete-selectList.coral-SelectList li.is-highlighted", function() {

    $(this).closest('ul').removeClass("is-visible").removeClass("is-below");

});

[srinivas_chann1]

Hi,

Thanks for the inputs the search works fine when i paste the above code in console of the browser.

But when i  copied the above script and added it under categorizes="[cq.authoring.dialog]" . The dialog is not closing  and neither saving when i click the [x]  or save button on the  main dialog window.

(function(document, $) {

$(document).on("keyup", "#productTagListTagcomp div>input.js-coral-Autocomplete-textfield", function() {

    applyFilter($(this).val().toLowerCase(), $("ul.js-coral-Autocomplete-selectList.coral-SelectList li"));

});

function applyFilter(txtVal, filterList) {

    filterList.each(function() {

        if ($(this).text().toLowerCase().indexOf(txtVal) > 0) {

            setTimeout(() => {

                    $(this).removeClass("is-hidden", false)

                    $(this).closest('ul').addClass("is-visible").addClass("is-below");

                },

                100);

        }

    });

}

})(document, Granite.$);

Please provide inputs as how this could be solved.

[arunpatidar · Accepted solution]

Hi,

I am not sure what is the issue at your end but it works fine for me

Code :

(function($, $document) {

    "use strict";

    $document.on("dialog-ready", function() {

        $(document).on("keyup", "#productTagListTagcomp div>input.js-coral-Autocomplete-textfield", function() {

            applyFilter($(this).val().toLowerCase(), $("ul.js-coral-Autocomplete-selectList.coral-SelectList li"));

        });

         $(document).on("click", "#productTagListTagcomp ul.js-coral-Autocomplete-selectList.coral-SelectList li.is-highlighted", function() {

            $(this).closest('ul').removeClass("is-visible").removeClass("is-below");

        });

    });

    function applyFilter(txtVal, filterList) {

            filterList.each(function() {

                if ($(this).text().toLowerCase().indexOf(txtVal) > 0) {

                    setTimeout(() => {

                            $(this).removeClass("is-hidden", false)

                            $(this).closest('ul').addClass("is-visible").addClass("is-below");

                        },

                        100);

                }

            });

        }

})($, $(document));

[srinivas_chann1]

Hi,

Thanks for your inputs again as you have now shared even a video .That really helps.

I noticed that setTimeout(() =>  this line was causing the issue for the dialog not to close .

So i changed it to

function applyFilter(txtVal, filterList) {

            filterList.each(function() {

               var $this=$(this);

                if ($(this).text().toLowerCase().indexOf(txtVal) > 0) {

                    setTimeout(function() {

                            $this.removeClass("is-hidden", false)

                            $this.closest('ul').addClass("is-visible").addClass("is-below");

                        },

                        100);

                }

            });

        }

The above worked for me. Do you have any more inputs on $this if i could write it in a better that could be used in setTimeout of this should be fine??

Thanks

[arunpatidar]

Hi Srinivas,

I did not get your question? could you please let us know, what issue are you facing now?

[srinivas_chann1]

Hi,

1>

setTimeout(() =>  This line was causing an issue in my code due to which I changed it below and it worked .The syntax may not be supported in the AEM i am using, due to internal query packages.

setTimeout(function() {

                            /////

                        },

                        100);

2>I have added var $this=$(this);  and using it in setTimeout is it fine this way or any other  better code we could change to  was my question under setTimeout

filterList.each(function() {

               var $this=$(this);

                if ($(this).text().toLowerCase().indexOf(txtVal) > 0) {

                    setTimeout(function() {

                            $this.removeClass("is-hidden", false)

                            $this.closest('ul').addClass("is-visible").addClass("is-below");

                        },

                        100);

                }

            });

Thanks

[arunpatidar]

var $this=$(this); line has no issues. It just a variable name and $ represent object type.

[srinivas_chann1]

Hi ,

I have 2 autocomplete then how could i modify the above code.

One with granite:id productTagListTagcomp and other with granite:id regionTagListTagcomp

Your inputs will be very helpful.

Please let me know in-case i need to create a new discussion for this.

Thanks

[arunpatidar]

you can use multiple selectors to register event for onlick

Example

$(document).on("click", "#productTagListTagcomp ul.js-coral-Autocomplete-selectList.coral-SelectList li.is-highlighted, #regionTagListTagcomp ul.js-coral-Autocomplete-selectList.coral-SelectList li.is-highlighted", function() {})

[srinivas_chann1]

Hi,

Thanks for the inputs

I have written the below code .Could you please suggest if you see any changes  on this

1> when i type in any character in one of the auto complete input field it shows both selection  results of both  tags id with 2 pop up,  so i am trying hide one of selection which is not typed. I Have replaced tag id names with TagA1 and TagB2 .

2>How to remove the scroll bar that is coming up when i type in any character in auto complete input field .When we have 2 autocomplete one below another.

(function($, $document) {

    "use strict";

    // when dialog gets injected

    $(document).on("dialog-ready", function(e) {

         $(document).on("keyup", "#TagA1 div>input.js-coral-Autocomplete-textfield", function() {

            applyFilter($(this).val().toLowerCase(), $("ul.js-coral-Autocomplete-selectList.coral-SelectList li"),

$('#TagB2  ul.js-coral-Autocomplete-selectList'));

        });

$(document).on("keyup", "#TagB2 div>input.js-coral-Autocomplete-textfield", function() {

            applyFilter($(this).val().toLowerCase(), $("ul.js-coral-Autocomplete-selectList.coral-SelectList li"),

$('#TagA1 ul.js-coral-Autocomplete-selectList'));

        });

         $(document).on("click", "#TagA1 ul.js-coral-Autocomplete-selectList.coral-SelectList li.is-highlighted", function() {

            $(this).closest('ul').removeClass("is-visible").removeClass("is-below");

        });

$(document).on("click", "#TagB2 ul.js-coral-Autocomplete-selectList.coral-SelectList li.is-highlighted", function() {

            $(this).closest('ul').removeClass("is-visible").removeClass("is-below");

        });

    });

    function applyFilter(txtVal, filterList ,hide ) {

        filterList.each(function() {

               hide.closest('ul').removeClass("is-visible",true).removeClass("is-below",true);

               var $this = $(this);//for timeout function

if ($(this).text().toLowerCase().indexOf(txtVal) > 0) {

                setTimeout(function(){

                         $this.removeClass("is-hidden", false);

                        $this.closest('ul').addClass("is-visible").addClass("is-below");

                         hide.closest('ul').removeClass("is-visible",true).removeClass("is-below",true);

                    },

                    200);

            }

        });

    }

})($, $(document));

2>How to remove the scroll bar that is coming up when i type in any character in auto complete.When we have 2 autocomplete one below another.

[konstantyn_diachenko]

Hi @srinivas_chann1 and @arunpatidar ,

Recently I tried to solve the same problem with autocomplete dialog component. I was looking for "contains" mode for an autocomplete suggestions search. After some investigation I found that we can provide mode property via granite:data attributes and it will be read by CUI.Autocomplete implementation (/libs/clientlibs/granite/coralui3), because it reads data attributes and maps them to options.

I tested this solution on tags from this thread and can confirm that it works as well.

<tag
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete"
    fieldLabel="Asset Tags"
    multiple="{Boolean}true"
    name="./assetTags">
    <granite:data
        jcr:primaryType="nt:unstructured"
        mode="contains"/>
    <datasource
        jcr:primaryType="nt:unstructured"
        sling:resourceType="cq/gui/components/common/datasources/tags"/>
    <options
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete/list"/>
    <values
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete/tags"/>
</tag>

I want to share this info for community if someone else is looking for this solution.

Best regards,

Kostiantyn Diachenko.