javascript - jquery:突出显示插件崩溃浏览器？

Question

大家好，对于你们大多数人来说可能是一个简单的问题。我想不通原因。在搜索框中输入内容时，我正在执行 ajax 请求。我总是得到的结果是一个无序列表。我只显示那些当前与搜索框中的字符串匹配的列表项。我向他们申请了一个class.matched。我删除了所有没有应用 .matched 类的项目。

此外，我正在使用 jquery 突出显示插件来突出显示列表内搜索框中的当前字符串。因此列表项在搜索框中突出显示了确切的词。

function doSearch(keyCode) {

    if ($('.s').val() !== '') {

        jqXHR_Old = $.post( Searchmap.ajaxurl, data, function(response) {

            $sr.html(response);

            //add class to all results that match the current searchterm
            var found = $('#searchresults ul li:icontains("' + $('.s').val() + '")');
            found.addClass('matched');

            //remove all remaining list-items
            $('#searchresults ul li').not('.matched').remove();

            //highlight current string in searchbox
            $('#searchresults ul li.matched').highlight($('.s').val());


        ...

除一种情况外，一切正常。每当输入字段的内容被删除并再次为空时，浏览器就无法停止脚本。该错误 100% 是由插件或此行引起的:$('#searchresults ul li.matched').highlight($('.s').val()); .. . 插件本身工作正常。我一直在用它。该插件甚至适用于这种情况，只是在这种罕见的情况下，当当前触发 ajax 请求并且输入中的文本再次设置为空时浏览器崩溃。

知道为什么会发生这种情况吗？这可能只是我遇到的一个逻辑问题。我已经在检查输入是否为空。所以实际上，当再次删除输入中的文本时，甚至不应该触发高亮行。

有什么想法吗？

Answer 1

亮点仍然会发生，您的 ajax 调用是异步的，它与您的其余代码一起运行。

您检查输入是否为空，然后启动您的 ajax。完成后，它会运行您传递给 的其余代码(此代码是回调函数)。所以您可能现在看到一个空字符串。

您可以尝试两件事。一种是存储您搜索的字符串，但这仍然可以是指向原始字符串的指针:

function doSearch(keyCode) {
    var input = $('.s').val();

    if (input !== '') {

        jqXHR_Old = $.post( Searchmap.ajaxurl, data, function(response) {

            $sr.html(response);

            //add class to all results that match the current searchterm
            var found = $('#searchresults ul li:icontains("' + input + '")');
            found.addClass('matched');

            //remove all remaining list-items
            $('#searchresults ul li').not('.matched').remove();

            //highlight current string in searchbox
            $('#searchresults ul li.matched').highlight(input);

或者尝试用相同的逻辑包装导致错误的行:

function doSearch(keyCode) {

    if ($('.s').val() !== '') {

        jqXHR_Old = $.post( Searchmap.ajaxurl, data, function(response) {

            $sr.html(response);

            //add class to all results that match the current searchterm
            var found = $('#searchresults ul li:icontains("' + $('.s').val() + '")');
            found.addClass('matched');

            //remove all remaining list-items
            $('#searchresults ul li').not('.matched').remove();

            //highlight current string in searchbox
            if ($('.s').val() !== '') {
                $('#searchresults ul li.matched').highlight($('.s').val());
            }