How to configure SXA Search Box to support tab or enter completion?

Question

Here is what I have setup:

Insurance Item Template:

• Title - Single-line Text
• InsuredStates - Multilist pointing to a list of states such as (Texas)
• Inherits from the _Searchable template in SXA

I have a tree structure like so:

The page contains three components:

1. Search Box with a scope set to the root Insurance folder
2. Search Results with a scope set to the Urgent Care folder
3. Search Results with a scope set to the Physical Therapy folder

The rendering variant is setup to show the state names. The StateName field exists on the state item as the fullname version (also has an abbrev.).

How do I get the tab completion to populate the search box? Hitting enter, tab, or clicking does not autocomplete. Hitting enter will however trigger a search with the text currently in the box.

How do I get the page to load without any search results? This appears on first page load.

Answer 1

I am afraid you are not able to address your needs without custom code right now.

How do I get the tab completion to populate the search box?

There is no way to configure such behaviour right now. If you want you could create your own component-search-box.js and implement additional behaviour for tab key

Search Box rendering use typeahead.js

typeahead = this.$el.find(".search-box-input").typeahead({
    hint: true,
    highlight: true,
    minLength: 2
}, {
    source: inst.model.get("searchEngine").ttAdapter(),
    displayKey: function () {
        return inst.$el.find(".search-box-input.tt-input").val();
    },
    templates: {
        suggestion: function (data) {
            return '<div class="sugesstion-item">' + data.html + '</div>';
        }
    }
}).on('typeahead:selected', function (event, datum) {
    var link = $(datum.html).find("a");

    if (link.length) {
        window.location.href = $(link[0]).attr("href");
    }
});

Once you click Enter/Tab, typeahead:selected event will be executed.

How do I get the page to load without any search results? This appears on first page load.

This is how search service currently works. It gets results and feed with them all available renderings on a page.

That way you will get facets without need to perform any action, which is good ( in most cases).

Search Results rendering contains something like that in his code (component-search-results.js)

XA.component.search.vent.on("results-loaded", this.resultsLoaded.bind(this));    

If you want specifically block Search Results from loading data, try to add your custom code somewhere there.

Answer 2

Here is the final solution I came up with. Thank you Alan for the help.

Tab Completion

How do I get the tab completion to populate the search box?

We took a different approach by attaching to the click event for the menu and blur event for the input. See the gist here.

Hide Search Results

How do I get the page to load without any search results?

I blogged about how I accomplished the hiding of the search box here.

Here are the basics of the approach:

• Add styles to the theme and include them in the Style Selector for components.
• Add scripts to monitor the change of Url hash and toggle visibility when certain conditions are met.

The gist here should help you get past the initial hurdle of writing the styles and code. I do however recommend you read the blog post.