Add a result (<li>) in result container when empty

[gitemconte]

Seriously, amazing plugin. The extensive documentation and demos have helped me through all my issues so far, but I am now stuck on if what I want to do is possible.

If the result finds 0 matches from the sources but the query matches a certain regEx pattern, I want to edit the result list to remove the empty result template and add a group/li with the same click functionality as if it was found from a source. Visually, what I have below works, but does nothing onClick, because the result was technically 0.

callback: {
    onLayoutBuiltBefore: function (node, query, result, resultHtmlList) {

        var regexSearchMatch;
        var regExText= 'one,two,three';

        regexSearchMatch = new RegExp(regExText.split(",").join("|")+ '\$');
        if (regexSearchMatch.test(query)) {
            resultHtmlList.removeClass("empty");
            resultHtmlList.find('li.typeahead__empty').remove();
            resultHtmlList.append(
                '<li class="typeahead__group" data-search-group="Numbers"><a href="javascript:;" tabindex="-1">Numbers</a></li><li class="typeahead__item"><a href="javascript:;" data-group="Numbers" data-index="0"><span class="typeahead__display">'+ query+ '</span></a></li>');
        }
        return resultHtmlList;
    },
    onClickAfter: function (node, a, item, event) {
        event.preventDefault;
        console.log('clicked');
    }
},

The console logs 'clicked' on any results from my source. However, never gets to this function with my dynamically added result. Is there a way to add a result dynamically in onLayoutBuiltBefore so that it acts like any other result?

Similar to this closed issue needing more information:
#191

[running-coder]

thanks for the kind words! Indeed the li binding occurs before executing the onLayoutBuiltBefore. I would need to extract the binding function and call it at the end of buildLayout.

The original plan for these callback was indeed to inject custom LI depending on the typed query or the result set. Lets fix that

[gitemconte]

Amazing. Thank you for the quick response. Please let me know if you need any further information.

Not to rush, but I am looking to set up a demo with this feature in the next week or so. Can you provide anymore information on how I could possibly edit my local copy to extract the binding and move to the end in the meantime, until this is closed?

[running-coder]

I've started to experiment yesterday and was able to reproduce. While trying to find the best solution, I re-tought of it and it seem like adding a result object and let the buildHtmlLayout handle the rest instead of adding Html and classes that might change in the future. Would be the more optimal solution but doing so will require a refactor / breaking changes of the group option and take more time.

Meanwhile, what you can do is to manually bind a click event similar to here. Every callback call is scoped within the global Typeahead object so you should easily be able to reconnect the behaviour using this.

Here is a good start on how you can proceed

callback: {
    onLayoutBuiltBefore: function (node, query, result, resultHtmlList) {

        console.log('_______')
        console.log(this)
        console.log('_______')

        // Perhaps inject the Group first, then a typeahead__item

        var liHtml = $('<li/>', {
            'class': 'typeahead__item',
            'html': '<a href="javascript:;" data-group="Numbers" data-index="0">' +
                '<span class="typeahead__display">'+ query + '</span ></a>'
        });

        liHtml.on('click', function () {
            // Manually call Typeahead behaviours
        });

        resultHtmlList.append(liHtml);

        return resultHtmlList;
    }
}

[gitemconte]

This is great. For my specific case I really just need to pass the dynamically created item to the AfterClick function, as I handle everything from there. The below doesn't work though.

liHtml.on('click', function (e) { this.options.callback.onClickAfter(this.node, $(this), this.item, e); });

[running-coder]

yep, doing a function () {} re-scopes this. You need to do:

var scope = this;
liHtml.on('click', function (e) { 
    scope.options.callback.onClickAfter(scope.node, liHtml.find('a:first'), scope.item, e); 
});

[gitemconte]

Yes! This is exactly what I need.

Thanks so much for all the help. Looking forward to future releases of such a great plugin.