Nova 资源搜索通过点击/输入进行，而不是在打字时进行

Question

我有超过 10,000,000 个项目的资源，但搜索速度很慢，尤其是在搜索输入的每个字母时。

我找到了一个半修复 https://nova.laravel.com/docs/resources/the-basics#resource-index-search-debounce 并设置为 10 秒，但按 [enter] 并单击 [🔍]两者都不搜索，它强制等待 10 秒到达搜索

是否有设置或某种方式可以通过 [enter] 或单击 [🔍] 来搜索资源？

Laravel Nova 3.23

Answer 1

为了解决您的问题，Laravel Nova 本身不支持通过

Enter

或单击搜索图标触发搜索，因为它依赖于实时搜索的去抖机制。但是，您可以使用其 JavaScript 扩展性功能自定义 Nova 的行为。

以下是修改搜索行为的方法：

第1步：发布Nova资产

运行以下命令来发布 Nova 资产，这将允许您自定义前端代码：

php artisan nova:publish

第 2 步：自定义搜索组件

导航到

resources/js

目录并创建或编辑您的自定义 JavaScript 文件。例如，您可以创建一个新文件，如

resources/js/custom-nova.js

。

通过监听

Enter

键或单击搜索图标来覆盖搜索组件。这是一个基本示例：

Nova.booting((Vue, router, store) => {
    Vue.component('index-search', {
        extends: Vue.options.components['index-search'],
        methods: {
            handleSearch(event) {
                if (event.key === 'Enter' || event.type === 'click') {
                    this.performSearch();
                }
            },
            performSearch() {
                this.$emit('search-changed', this.search);
            }
        },
        template: `
            <div>
                <input
                    type="text"
                    v-model="search"
                    @keyup="handleSearch"
                    placeholder="Search..."
                />
                <button @click="handleSearch">🔍</button>
            </div>
        `,
    });
});

第3步：编译资产

对 JavaScript 文件进行更改后，编译资产：

npm run dev

第 4 步：测试您的更改

访问您的 Nova 资源索引页面，现在只有当您按

Enter

或单击搜索按钮时才会触发搜索。

额外优化

如果您仍然面临性能问题，请考虑添加：

• 服务器端优化：在数据库表上使用正确的索引。
• 分页：确保有效地对结果进行分页。
• 搜索定制：如果数据集非常大，请使用 Algolia 或 Elasticsearch 等搜索服务。