WordPress站点jQuery实时搜索部分页面.val()取不到输入值求助

可能的原因 #

• 基础语法错误：你贴出的核心代码存在语法问题，第一行变量声明结尾用了逗号，第二行又重复使用var关键字声明变量，部分页面的JS压缩工具会自动修复该错误，但着陆页、归档页的JS加载逻辑未做兼容，导致代码直接报错终止执行，取值自然返回空。
• 选择器匹配到重复元素：着陆页、归档页通常会加载更多模板自定义内容，大概率存在多个带.gd-search-field-search .search_text类的隐藏DOM元素，你的选择器默认取到第一个未输入内容的隐藏元素，val()自然返回空。
• 代码执行时机早于DOM渲染：着陆页、归档页的资源加载顺序和普通页面不同，可能你的JS逻辑在搜索框DOM还没挂载到页面时就执行了，此时取到的元素对象本身是空，val()返回空值。
• jQuery作用域冲突：WordPress默认自带的jQuery开启了noConflict模式，你的代码如果没有做兼容处理，在加载了更多自定义JS的着陆页、归档页可能出现$指向异常，导致选择器失效。
• 第三方插件/主题逻辑拦截：部分归档页的分类、过滤插件会在DOM加载后自动清空搜索类输入框的值，或者绑定事件拦截输入值的写入，导致你取到的值被清空。

排查方案 #

• 先修复基础语法错误，变量声明要么用逗号分隔省略第二个var，要么拆成两个独立语句用分号结尾：

// 正确写法1
var searchField = $('.gd-search-field-search .search_text');
var query = searchField.val();

// 正确写法2
var searchField = $('.gd-search-field-search .search_text'),
    query = searchField.val();

• 验证选择器匹配结果：在出现问题的页面打开开发者控制台，执行console.log($('.gd-search-field-search .search_text'))，查看返回的元素列表长度是否大于1。如果存在多个匹配元素，建议给搜索小部件加唯一ID，修改选择器做精准匹配，比如$('#custom-search-widget .search_text')。
• 调整代码执行时机：将取值逻辑放到DOM就绪回调中，或者绑定到搜索框的input、搜索按钮的click事件触发时再取值，不要在页面加载初期提前取值，同时兼容WordPress的jQuery作用域：

jQuery(function($) {
  // 搜索触发时再取值，比如点击搜索按钮或者输入时实时取值
  $('.gd-search-field-search .search_text').on('input', function() {
    const query = $(this).val();
    // 后续搜索逻辑写在此处
  })
})

• 验证jQuery指向是否正常：在问题页面控制台执行console.log($ === jQuery)，如果返回false说明$被其他JS库占用，将你的代码中所有$替换为jQuery即可解决。
• 排查第三方逻辑冲突：暂时禁用着陆页、归档页加载的其他自定义插件，切换为默认主题测试，如果搜索功能恢复正常，逐个开启插件定位冲突的功能模块即可。

内容的提问来源于stack exchange，提问作者Fou Rorty