时间戳

首页 > 解决方案 > laravel 中的 Vue 自动完成

javascript - laravel 中的 Vue 自动完成

问题描述

我正在处理 laravel 站点中的 vue 自动完成功能问题。

我已经设置了路线、控制器和刀片。目前，如果我检查 vue 组件并输入输入，它会显示我在控制台中输入的关键字，所以我知道它正在捕捉我输入的内容。

至于我的控制器中的 $groupResult，如果我只是在我的页面上转储它，那么它会按预期转储大约 100 个结果。我想要做的就是对在这 100 个结果中搜索的输入进行自动完成。

我到底在这里想念什么？

路线

Route::get('campaigns/categories','CampaignsController@searchcategories')->name('campaigns.categories');

控制器：

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);

}

刀

<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');

标签： javascriptlaravelvue.jsautocomplete

解决方案

如果您只是尝试过滤现有结果，则无需调用服务器来执行此操作。

<div id="categoryNames">
<input type="text" v-model="keywords">
<ul v-if="filteredResults.length > 0">
  <li v-for="result in filteredResults" :key="result.id" v-text="result.name"></li>
</ul>
</div>

var categoryNames = new Vue({
  data() {
    return {
      keywords: null,
      results: []
    };
  },

  computed: {
    filteredResults () {
      return this.keywords ? this.results.filter(row => row.name.search(new RegExp(`${this.keywords}`, 'i')) !== -1) : this.results
    }
  }
}).$mount('#categoryNames');

计算属性返回一个对象数组（我假设您正在过滤对象键名）。如果存在关键字，它将使用正则表达式执行不区分大小写的搜索。如果关键字不存在，则返回完整的结果对象。

请注意，我没有直接测试此代码，因此可能存在拼写错误等。但是已经在大型应用程序中实现了许多版本。

推荐阅读