使用 keyup vuejs 和 laravel 进行即时搜索

Posted 2023-02-22

【中文标题】使用 keyup vuejs 和 laravel 进行即时搜索

【英文标题】：Instant Search with keyup vuejs and laravel

【发布时间】：2017-09-24 09:23:23

【问题描述】：

我尝试使用 vuejs 和 laravel 5.3 构建即时搜索，但不知何故它无法正常工作，没有显示错误

控制器（完整代码https://pastebin.com/6mQ4eWTf）：

public function index(Request $request) 
        $search = $request->search;
        $items = Staff::where('nama', 'LIKE', '%'.$search.'%')->paginate(5);
        $response = [
            'pagination' => [
                'total'        => $items->total(),
                'per_page'     => $items->perPage(),
                'current_page' => $items->currentPage(),
                'last_page'    => $items->lastPage(),
                'from'         => $items->firstItem(),
                'to'           => $items->lastItem()
            ],
            'data'       => $items
        ];  

staff.js 方法（完整代码https://pastebin.com/NDxzqsyp）：

methods: 
        getVueItems: function (page) 
            this.$http.get('/staffitems?page=' + page + '&search=' + this.search).then((response) => 
                this.$set('items', response.data.data.data);
                this.$set('pagination', response.data.pagination);
            );
            setTimeout(this.getVueItems, 5000);
        ,

刀片（完整代码https://pastebin.com/6uDZRryE）：

<input v-on:keyup.enter="getVueItems" type="text" class="form-control" name="search" placeholder="Cari..." v-model="search"/>  

路线：

Route::get('/staffcrud', 'StaffController@Crud');
Route::resource('/staffitems', 'StaffController');

正确显示的数据（通过从 /staffitems?page=1&search=jon 获取带有或不带有搜索值的 json 响应进行测试），但不知何故，当我在输入搜索列中键入要搜索的单词时，我一完成就没有任何反应打字，可能刀片中的事件处理是错误的，或者我在 staff.js 中的方法有什么解决方案？

【问题讨论】：

我打算在输入完成后立即搜索，无需按回车...

还是不行... :(什么是去抖动？

是否进行了 http 调用？

是的，我确实有查询结果，但没有搜索结果。使用完整代码更新问题。

这是 Vue 2 还是 1？

【参考方案1】：

您应该在 mounted() 方法中添加去抖动功能：

mounted() 
    this.getVueItems = _.debounce(this.getVueItems, 5000); // i'm using lodash here.

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。

【参考方案2】：

仅在刀片模板中使用：

v-on:keyup='vueGetItems'

因为您的即时搜索仅在输入键时触发。我希望这会奏效或与我联系以获取完整的工作代码。

【参考方案3】：

要构建真正有效的即时数据库搜索，您应该考虑将 pusher 和 laravel echo 与 vuex 一起使用

你可以看看这个>>>Ethiel Adiassa's Live Search Tutorial with laravel and pusher