I need to filter products in my application based on name and category. To achieve this, I have included a search text box and a dropdown select box. The dropdown select box offers two options: 1. Search products by name 2. Search products by category name. Depending on the selected option, the search text box will be activated and focused.
Here is the template code:
<el-form>
<el-row :gutter="15"
type="flex"
class="search__product">
<el-col class="filter_option">
<app-select name="ProductFilter"
:options="filterOptions"
:selected="selectedSearchOption"
@onChange="onSearchOptionChange" />
</el-col><el-col class="search_input">
<el-input placeholder="Search product"
aria-label="Search product"
@keyup.enter.native="searchProduct"
v-model="filterText">
</el-input>
</el-col>
</el-row>
</el-form>
Function to populate dropdown values:
get filterOptions(): OptionTypes[] {
return [
{ label: 'Search by Product Name', value: 'Product' },
{ label: 'Search by Category Name', value: 'Category' }
]
}
Function for searching products:
searchProduct() {
if (this.filterText !== '') {
this.$store.dispatch('fetchProductsBySearchName', this.filterText)
}
}
Event for dropdown selection change:
onSearchOptionChange(value) {
this.selectedSearchOption = value
}
The current setup works well for searching products by name. I now intend to enhance the functionality by enabling and focusing the search text box based on the dropdown selection.