如何使用jQuery获取包含input字段值的元素文本内容

API 探路者

2026-7-15

实现包含input值的元素搜索过滤

你的原始搜索过滤函数仅通过$(this).text()获取元素文本，无法识别input这类表单控件的输入值。这里提供几个优化思路和实现方案：

优化思路1：统一封装可搜索内容获取逻辑

可以单独封装一个函数，一次性获取元素的文本内容 + 所有表单控件的有效值，不用分开拼接：

function getSearchableContent($element) {
    // 先获取元素本身的文本内容
    let content = $element.text().trim();
    // 遍历所有常见表单控件，追加有效值
    $element.find('input, select, textarea').each(function() {
        const val = $(this).val().trim();
        if (val) {
            content += ' ' + val;
        }
    });
    return content;
}

function searchFilter(root, selector, regex) {
    root.find(selector).each(function() {
        const $item = $(this);
        $item.toggle(regex.test(getSearchableContent($item)));
    });
}

该方案优势：

支持更多表单控件（select、textarea也能覆盖）
自动过滤空值，避免无效空白字符干扰匹配
代码模块化，getSearchableContent可复用在其他场景

优化思路2：简化临时实现

如果只需要支持input控件，也可以简化你的临时方案，用jQuery的map方法减少冗余代码：

function searchFilter(root, selector, regex) {
    root.find(selector).each(function() {
        const $el = $(this);
        const inputValues = $el.find('input').map(function() {
            return $(this).val();
        }).get().join(' ');
        $el.toggle(regex.test($el.text() + ' ' + inputValues));
    });
}