fdk-compare-search

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.

Props

Key	Type	Description
suggestions	Array	this is the list of result of searched data or initial data while no text is searched
noResults	Boolean	when no product is found for the entered search text, this flag turns true
executeQuery	Function	handler to show product listing with any query searchText, all the resultant products will be available into suggestions prop
fetchSuggestions	Function	handler to fetch searchResults for given searchText
filter	object	this prop contains the filter which can be a particular category for which the products will be fetched for comparision

---

Functions

• 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.

---

Example

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