Question

我正在研究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');

Answer 1

如果您只是尝试过滤现有结果，则无需调用服务器即可。

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

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

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

laravel中的Vue自动完成功能

1 个答案: