Skip to content

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

@gitemconte

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions