代码之家 › 专栏 › 技术社区 › Geoff_S

laravel中的Vue自动完成

autocomplete vue.js laravel javascript

Geoff_S · 技术社区 · 6 年前

我正在处理一个与一个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');

0 回复 | 直到 6 年前

Tim Wickstrom 6 年前

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

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

computed属性返回一个对象数组(我假设您正在对对象键名称进行过滤)。如果存在关键字,则使用正则表达式执行不区分大小写的搜索。如果关键字不存在,则返回完整结果对象。

注意,我没有直接测试这段代码,所以可能会有打字错误等等,但是我已经在一个大规模的应用程序中实现了很多版本。

推荐文章

Kostya Bronshteyn · Laravel在安装示例应用程序后无法运行web服务器

5 月前