I want to develop a search page where users can enter a keyword and get a list of results, along with the option to filter by category if necessary. I have managed to make both the input field and radio buttons work separately, but not together. So, when someone performs a keyword search, those results are shown. When someone filters by category, only those results are displayed. However, I am unsure how to utilize my search box once a category is selected. I would like the search box to search within the results belonging to that specific category.
HTML
<div id="app" v-cloak>
<div class="container">
<div class="row search-wrapper">
<div class="col-xs-6 col-md-4">
<div class="input-group stylish-input-group">
<input type="text" class="form-control" placeholder="Filter by keyword" v-model="search">
<span class="input-group-addon">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="col-xs-12 col-md-8 text-right">
<div data-toggle="buttons">
<label class="btn btn-sm btn-all">
<input type="radio" v-model="selectedCategory" value="All" /> All
</label>
<label class="btn btn-sm btn-hr">
<input type="radio" v-model="selectedCategory" value="HR" /> Our People
</label>
<label class="btn btn-sm btn-finance">
<input type="radio" v-model="selectedCategory" value="Finance" /> Finance
</label>
<label class="btn btn-sm btn-other">
<input type="radio" v-model="selectedCategory" value="Other" /> Other
</label>
</div>
</div>
</div> <!-- search wrapper -->
<div class="row sm-padding">
<div v-for="form in filteredForms" class="col-xs-6 col-sm-4 sm-padding">
<div class="box">
<div class="form-type" v-bind:class="{ compClass }"></div>
<div class="text-right"><span class="glyphicon glyphicon-star"></span></div>
<div class="box__title"> {{ form.name }} </div>
<div class="box__subtitle"> {{ form.category }} </div>
<div class="box__link"> <a href="#" title="">Use this form</a></div>
</div>
</div>
<div v-if="filteredForms.length === 0" >
<div class="box box__empty"> No Match Found</div>
</div>
</div> <!-- results -->
</div> <!-- container -->
</div> <!-- #app -->
Vue JS
var vm = new Vue({
el: '#app',
data: {
forms: [
{ name: 'Learning and Professional Development Record', category: 'HR', activeColor: 'red', views: 312},
{ name: 'New Vendor Request', category: 'Finance', activeColor: 'blue', views: 23121 },
{ name: 'On-call allowance', category: 'HR', activeColor: 'red', views: 231},
{ name: 'Overtime Claim', category: 'HR', activeColor: 'red', views: 443},
{ name: 'Alteration of Kindergarten Enrolment', category: 'Other', activeColor: 'yellow', views: 403},
{ name: 'Adjustment to vendor details', category: 'Finance', activeColor: 'blue', views: 8843}
],
selectedCategory: 'All',
search: '',
},
computed: {
filteredForms: function() {
var vm = this;
var category = vm.selectedCategory;
var forms = vm.forms.filter((form) => {
return form.name.toLowerCase().includes(vm.search.toLowerCase());
});
if(category === "All") {
return forms;
} else {
return vm.forms.filter(function(dept) {
return dept.category === category;
});
}
}
}
})
Pen: Codepen