Quick Search Element Placement

1 min

Sometimes you need to have more control over the exact placement of the results for Quick Search. Luckily there is a setting in the library that allows you to specify this using any element on the page.

// Wait for the Klevu library to be ready
window._klvReady = window._klvReady || [];
window._klvReady.push(function(){
    klevu({
        search: {
            // Tell Klevu to use this as the target to show Quick Search results
            searchBoxTarget: document.querySelector("#myCustomTarget"),
        }
    });	

    // If Quick Search has already been initialized, rebuild it to use the new settings
    if (klevu.getObjectPath(klevu.settings, 'flags.bindLocalBoxes.build', false)) {
        klevu.rebuild.quick();
    }	
});

The code above will wait for the Klevu library to be loaded, then will specify the element to use for the searchBoxTarget.

Note the value you pass to searchBoxTarget must be a reference to the element itself and not just a CSS selector.

Sometimes the Quick Search has already loaded and initialized by the time you run this code, so the example above will also rebuild Quick Search to use the new setting if needed.