jQuery 匹配 JSON 对象的部分文本答案

【问题标题】：jQuery match partial text of JSON objectjQuery 匹配 JSON 对象的部分文本
【发布时间】：2012-09-08 16:57:43
【问题描述】：

我正在为我的网站提供实时搜索结果功能。我有一个 JSON 对象，其中包含我想匹配输入值的关键术语。

对此我能想到的最佳解决方案是循环遍历每个术语，并使用 jQuery 选择器查找部分匹配项。我怎样才能做出这样的if语句？例如：

$.getJSON('jsonfile.json', function(data) {
    key = Object.keys(data);
    for(i=0;i<key.length;i++)
    {
        if($(input[value]:contains == key[i].term)
        {
            //do something
        }
    }
}

编辑：我很抱歉不清楚。我正在使用 :contains 选择器对一个输入的值进行部分匹配。

【问题讨论】：

标签： javascript jquery json contains

【解决方案1】：

如果您的项目很少（比如几十个），您可以做的一件事是创建一个匹配其中任何一个的正则表达式：

var match = keys.join("|")
var regexp = RegExp.new(match, 'i') // Case insensitive
if($(input).val().match(regexp)) {
    // do stuff
}

是的，我知道这不会搜索与术语匹配的 any 输入，您必须预先知道输入元素，但从您的问题来看，我假设您想检查单个输入元素。

不知道它是否比遍历所有术语并逐个检查更快，但我认为是这样，而且它肯定更具可读性。

这可以与 jQuery 的 grep 或 each 方法结合使用：

var match = keys.join("|")
var regexp = RegExp.new(match, 'i')

// With grep
var matches = $('input').grep(function(elem, idx) {
    return $(input).val().match(regexp) != null;
})

// Or with each
$('input')..each(function(idx, elem) {
    if ($(input).val().match(regexp) != null) {
        // Do stuff
    }
});

grep 选择与任何搜索词匹配的所有输入字段供以后使用，each 遍历所有元素以立即对其进行操作。

【讨论】：

您可以调整正则表达式以匹配您想要的任何方式。您可以使用\b 添加单词边界，但它不会匹配原始搜索词的部分命中。例如。它会将“ape”与包含“grape”的输入匹配，但不会将“grape”与包含“ape”的输入匹配。当然，使用正则表达式，您也可以构建它；-)

【解决方案2】：

您需要将:contains 选择器构建为字符串：

if($('input[value]:contains("' + key[i].term + '")').length) {
    //do something
}

选择器将返回输入中包含词条的所有元素；添加 .length 为 if 语句提供了一个简单的“真实”值来评估（返回 0 项 ==“false”，返回 >0 项 ==“true”）。

编辑：我不确定input[value]:contains() 是否是一个有效的jQuery 选择器，因为我不知道:contains() 在输入元素上看到什么文本。您可能需要自己检查每个输入的 value 来帮助解决这个问题。您可以将找到的输入过滤到值包含您要搜索的术语的输入：

if ($('input[value]').filter(function() {
        return $(this).val().indexOf(key[i].term) != -1;
    }).length) {
    //do something
}

【讨论】：

是否有不区分大小写的 contains 版本？