Autocomplete:autocompleted event not working

Hi,

i am using autocomplete:autocompleted event but it is not not firing

}).on(‘autocomplete:autocompleted’, function (e, s, d) {
consol.log(‘done’);
});

please guide me for the same.

Thanks

Hello @patelvansh4,

Your issue seems rather broad. Could you be more specific about what’s not working and what you would expect.

Ideally, could you send us a more detailed code snippet for your HTML as well?

Otherwise, from the code you sent us, you seem to have a type with consol which should be written console instead. Usually, when something is not working, I’d suggest you to take a look at the Developer Console of your web browser dev tools to see if there’s no error here. If any, feel free to share them to us as well.

Best,

yes i have check in developer console using debugger this event is not firing.

    if (autocomplete) {

        autocomplete('.ui-autocomplete-input', {
            debug: true,
            minLength: 2,
        },
            [
                  {
                    source: SearchPageHandler.Condition,
                    displayKey: 'name',
                    name: 'conditions',
                    cache: false,
                    templates: {
                        header: '<div class="aa-suggestions-category">' + newSearchContent.conditionHeader + '</div>',
                        suggestion: function (result) {
                            if (result.Type === "Condition") {
                                var cHtml = '<div class="condition"><a href="' + Urls.Site + result.Url + '">' + result._highlightResult.Name.value + '</a ></div>';
                                return cHtml;
                            }
                            else {
                                var sHtml = '<div class="seoPage"><a href="' + Urls.Site + result.Url + '">' + result._highlightResult.Name.value + '</a></div>';
                                return sHtml;
                            }
                        },
                        empty: '<div class="aa-empty">' + newSearchContent.noCondition + '</div>'
                    }
                },
                {
                    source: SearchPageHandler.Contents,
                    displayKey: 'name',
                    name: 'contents',
                    cache: false,
                    templates: {
                        header: ContentHeader,
                        suggestion: function (result) {
                            var sHtml = '<div class="content-list ' + (result.Type == "DoctorArticals" ? "content-list-blog" : "content-list-SeoPage") + '"><a href="' + Urls.Site + result.Url + '"><span>' + result._highlightResult.Name.value + '</span>';
                            if (result.ParentName !== null && result.ParentName !== undefined && result.Type == "SeoPage") {
                                sHtml = sHtml + '<div class="col"><span id="condition">' + result.ParentName + '</span></div></a></div>';
                            }
                            else if (result.Type == "DoctorArticals") {
                                sHtml = sHtml + '<div class="col"><span id="condition">Blog</span></div></a></div>';
                            }
                            return sHtml;
                        },
                        empty: '<div class="aa-empty">' + newSearchContent.noSeo + '</div>'
                    }
                }
            ]).on('autocomplete:selected', function (e, s, d) {
                window.location.replace(s.Url);
            }).on('autocomplete:updated', function (e, s, d) {
                var span = this.parentNode;
                var gParent = $(span).closest('.form-search-div');
                var ddl = this.parentNode.lastChild;
                if ($(ddl).css('display') == 'block') {
                    $(gParent).addClass('search-open');
                }
                else {
                    $(gParent).removeClass('search-open');
                }
            }).on('autocomplete:autocompleted', function (e, s, d) {
                console.log('done');
            });
    }

this is my some part of code snippet.

i am using autocomplete with 3 source but my requirement is i want execute third source only if first and second sources getting empty results.

is there any way to do this ?

can we invoke source synchronously ?

i am using autocomplete with 3 source but my requirement is i want execute third source only if first and second sources getting empty results.

is there any way to do this ?

can we invoke source synchronously ?

Sadly no, the autocomplete.js can only be used for what it does. If you’d like to build a more complex logic into your application, you would need to use one of our InstantSearch libraries or our vanilla JavaScript client.

Regarding your issue about the autocomplete:autocompleted not firing, do you confirm that other events are working? If your application is hosted over a public facing website on internet, could you give us a link for us to try the interface and take a look at the dev console?