Skip to main content


You are reading an outdated document

Get the latest developer guides on Fynd Partners Help

This action component can be used to provide the facility of searching products on the products compare page, so that user can add those products for search.


suggestionsArraythis is the list of result of searched data or initial data while no text is searched
noResultsBooleanwhen no product is found for the entered search text, this flag turns true
executeQueryFunctionhandler to show product listing with any query searchText, all the resultant products will be available into suggestions prop
fetchSuggestionsFunctionhandler to fetch searchResults for given searchText
filterobjectthis prop contains the filter which can be a particular category for which the products will be fetched for comparision


  • executeQuery(searchText)

Here searchText is the entered product name which need to be searched, this function will push the searched text into the router.

  • fetchSuggestions({ search: ‘’, filter: { l3_categories: ‘smartphones’ },pageSize: 15})

Here three parameters are passed into this function, which are:

* **search:** this is the text for which products will be searched
* **filter:** this is the object which contain the filter on which the product will be searched, basically we filter products on the basic of their category.
* **pageSize:** this stores the value of required elements in the **suggestions** prop.


<fdk-compare-search :pageSize="10"
:filter="{ l3_categories: firstCategory }">
<template slot-scope="compareSearchData">
@input="compareSearchData.fetchSuggestions({ search: this.searchtext, pageSize: 15 })"
placeholder="Search for products here"
//code for further display search results using **suggestions** prop