javascript - .javascript 中的测试未按预期工作

Question

我创建了一个自定义选择菜单的小插件。我必须在该下拉列表中实现搜索功能。但是我已经添加了功能，但有时它没有给出正确的结果，例如。如果您在输入框中键入“a”，那么它应该显示如下所示的结果

但是我的插件在下面给出了结果。它还将大写字母替换为小写字母。我正在尝试解决此问题，但无法解决它。 fiddle

searchItem: function () {
    var patt = new RegExp(this.value, 'gi')
    var val = this.value;
    $('#options li').each(function () {

        if (!patt.test($(this).text())) {
            $(this).hide();
        } else {
            $(this).show();
            apply.highlight.call(this, val);
        }
    });

    $('#options h2').each(function () {
        if (!patt.test($('label', this).text())) {
            $(this).hide();
        } else {
            $(this).show();
            apply.highlight.call(this, val)
        }
    });

}

Answer 1

不匹配项目的问题在于您正在对多个元素使用相同 RegExp 对象的测试方法。

但是.test()将移动每个匹配的起始位置(它是为了匹配同一字符串上的后续匹配)

因此您应该为每个元素创建一个新的 RegExp 对象。 (或使用 .match() 并检查其长度)

searchItem: function () {
        var pattValue = this.value;
        var val = this.value;
        $('#options li').each(function () {
            var patt = new RegExp(pattValue, 'gi');
            if (!patt.test($(this).text())) {
                $(this).hide();
            } else {
                $(this).show();
                apply.highlight.call(this, val);
            }
        });

        $('#options h2').each(function () {
            var patt = new RegExp(pattValue, 'gi');
            if (!patt.test($('label', this).text())) {
                $(this).hide();
            } else {
                $(this).show();
                apply.highlight.call(this, val);
            }
        });
    }

---

要将字符替换为您输入的字符，请使用匹配的文本而不是用户提交的文本，您需要在 RegExp 中创建一个组并使用该捕获来替换匹配

    highlight: function (val) {
        var nn = new RegExp('(' + (val||'^$') + ')', 'gi');
        var txt = $(this).find('label').text();
        txt = txt.replace(nn, "<span class='highlight'>$1</span>");
        $('label', this).html(txt)
    }

---

最后，您需要在创建选项时重置 li 变量

演示在 http://jsfiddle.net/b0rspd5e/