页面加载时默认聚焦search & filter搜索框问题求助

嘿，我之前也踩过这个坑！直接加autofocus或者onfocus经常因为小部件的动态加载时机问题失效，尤其是Search & Filter这种会延迟渲染组件的工具。给你几个亲测有效的方案：

方案1：延迟触发聚焦（最省心的通用解法） #

因为店铺页面的小部件可能在页面DOM加载完成后才逐步渲染，直接在页面初始化时执行聚焦会找不到元素。试试用延迟函数确保搜索框已经存在：

jQuery(document).ready(function($) {
    // 延迟500毫秒，给组件足够的渲染时间
    setTimeout(function() {
        // 替换成你搜索框的实际选择器，Search & Filter默认是.sf-input-text
        const searchInput = $('.sf-input-text');
        if (searchInput.length) {
            searchInput.focus();
        }
    }, 500);
});

不确定选择器的话，右键搜索框→检查元素，复制它的class或ID替换进去就行。如果500毫秒不够，可以调到800或1000试试。

方案2：用Search & Filter内置钩子精准触发 #

这个工具提供了专属的动作钩子，能在组件初始化完成后再执行聚焦，比延迟更可靠：

add_action('search_filter/frontend/after_setup', 'sf_auto_focus_search_field');
function sf_auto_focus_search_field() {
    ?>
    <script>
        // 监听组件AJAX加载完成事件（适配筛选后的刷新场景）
        document.addEventListener('sf:ajaxfinish', function() {
            const searchInput = document.querySelector('.sf-input-text');
            if (searchInput) {
                searchInput.focus();
            }
        });
        // 页面首次加载时也触发一次
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.querySelector('.sf-input-text');
            if (searchInput) {
                searchInput.focus();
            }
        });
    </script>
    <?php
}

把这段代码加到主题的functions.php里，或者用代码片段插件添加，避免主题更新时丢失代码。

方案3：直接修改组件模板（进阶玩法） #

如果上面两种都不行，可以直接修改Search & Filter的小部件模板：

1. 找到插件目录下的templates/widgets/search-filter.php文件
2. 把它复制到你的子主题目录下，路径要对应：你的子主题文件夹/search-filter/widgets/search-filter.php
3. 在搜索框的<input>标签里添加autofocus属性，同时确保没有其他元素抢焦点：

<input type="text" name="sf-search" class="sf-input-text" autofocus>

注意：插件更新后如果模板有变动，记得同步更新子主题里的模板文件哦。

额外排查小技巧 #

• 检查页面上有没有其他带autofocus属性的元素，浏览器只会让第一个带该属性的元素获得焦点
• 打开浏览器开发者工具的控制台，手动输入document.querySelector('.sf-input-text').focus()，如果能生效，说明就是时机问题，调整延迟时间即可

内容的提问来源于stack exchange，提问作者Sparkles The Unicorn