Laravel 10+Inertia 1.0+Svelte：实时搜索不丢页面数据的实现方法

你之前的问题出在误用了Inertia的页面渲染来返回搜索结果——Inertia::render会触发客户端的页面替换逻辑，相当于重新加载了产品编辑页，自然会覆盖掉内存里的表单数据，还会改变URL。正确的做法是用纯API接口+Axios异步请求，完全不触动Inertia的页面渲染流程，具体步骤如下：

1. 定义纯API路由 #

创建一个返回JSON数据的路由，不要返回Inertia页面：

// routes/web.php 或者 routes/api.php
Route::get('/products/search-tags', [ProductController::class, 'searchTags']);

2. 实现控制器的搜索逻辑 #

控制器里只需要查询标签并返回JSON，不用管Inertia的页面渲染：

// app/Http/Controllers/ProductController.php
public function searchTags(Request $request)
{
    $keyword = $request->query('q'); // 获取搜索关键词
    $tags = Tag::where('name', 'like', "%{$keyword}%")
        ->limit(10) // 限制返回数量，避免过多数据
        ->get(['id', 'name']); // 只返回需要的字段

    return response()->json(['tags' => $tags]);
}

3. 在Svelte组件里用Axios实现实时搜索 #

在产品编辑页的Svelte组件中，维护本地状态存储搜索结果，监听输入框事件发起异步请求：

<script>
    import axios from 'axios';

    // 页面原有产品数据（由Inertia传递过来）
    export let product;
    // 本地存储搜索结果
    let searchKeyword = '';
    let tagSearchResults = [];
    let timeoutId = null;

    // 自己实现防抖函数，避免频繁请求
    const fetchTags = () => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(async () => {
            if (!searchKeyword.trim()) {
                tagSearchResults = [];
                return;
            }

            try {
                const response = await axios.get('/products/search-tags', {
                    params: { q: searchKeyword }
                });
                tagSearchResults = response.data.tags;
            } catch (error) {
                console.error('搜索标签失败:', error);
            }
        }, 300); // 300ms延迟，可按需调整
    };
</script>

<!-- 产品编辑表单 -->
<input type="text" bind:value={product.name} placeholder="产品名称" />
<input type="number" bind:value={product.price} placeholder="价格" />

<!-- 标签搜索输入框 -->
<input 
    type="text" 
    bind:value={searchKeyword} 
    placeholder="搜索历史标签..."
    on:input={fetchTags}
/>

<!-- 搜索结果展示 -->
{#if tagSearchResults.length}
<ul>
    {#each tagSearchResults as tag}
        <li>{tag.name}</li>
    {/each}
</ul>
{/if}

关键说明 #

• Axios发起的异步请求不会改变当前页面的URL，也不会触发Inertia的页面重新渲染，所以表单里的product_name、price等数据会完整保留在内存中。
• 防抖处理能避免用户每输入一个字符就发起一次请求，减轻服务器压力，也能提升用户体验。

内容的提问来源于stack exchange，提问作者Wilton Neves Aguiar