Currently, I am troubleshooting an issue with a vue autocomplete feature on a laravel website.
I have configured the route, controller, and blade. When I inspect the vue component and type in the input field, I can see the keywords I am typing in the console, indicating that it is capturing the input correctly.
When I dump the $groupResult variable in my controller, I get about 100 results as expected. My goal is to implement an autocomplete feature on the input field that searches within these 100 results.
What am I overlooking here?
Route:
Route::get('campaigns/categories','CampaignsController@searchcategories')->name('campaigns.categories');
Controller:
public function searchcategories(Request $request)
{
$userNum = $this->user;
$category = new categoryService();
$safecategories = $category->info($userNum);
$groupResult = array();
foreach($safecategories->categories as $categories){
$groupItem = array();
$groupItem["group_code"] = $categories->group_code;
$groupItem["group_name"] = $categories->group_name;
array_push($groupResult, $groupItem);
}
return view('campaigns')
->with('groupResult', $groupResult);
}
Blade Template:
<div id="categoryNames">
<input type="text" v-model="keywords">
<ul v-if="results.length > 0">
<li v-for="result in results" :key="result.id" v-text="result.name"></li>
</ul>
</div>
var categoryNames = new Vue({
data() {
return {
keywords: null,
results: []
};
},
watch: {
keywords(after, before) {
this.fetch();
}
},
methods: {
fetch() {
axios.get('campaigns/categories', { params: { keywords: this.keywords } })
.then(response => this.results = response.data)
.catch(error => {});
}
}
}).$mount('#categoryNames');