jquery: highlight plugin crashes browser?

hey guys, probably simple question for the most of you. I can't figure out the reason. I'm doing ajax requests when typing into a searchbox. the result I always get is a unordered list. I only show those list-items that currently match the string in the searchbox. I apply a class.matched to them. I remove all items that don't have a class .matched applied.

And moreover I'm using a jquery highlight plugin to highlight the current string in the searchbox inside the list. So the listitem has the exact words in the searchbox highlighted.

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());


        ...

Everything works fine, except for one case. Whenever the input field gets its content deleted and is empty again the browser can't stop a script. The bug is 100% caused by the plugin or moreover this line: $('#searchresults ul li.matched').highlight($('.s').val()); ... the plugin itself works just fine. I'm using it all the time. The plugin does even work for this scenario, just in this one rare case when the ajax request is currently fired and the text in the input is set empty again the browser crashes.

Any idea why that could happen? It's probably just a logical problem that I have. I'm already checking if the input is empty. So actually the hightlight line shouldn't even be fired when the text in the input is removed again.

any idea?

The highlight will still happen, your ajax call is async, it runs alongside the rest of your code.

You check if the input ins't empty, then fire off your ajax. When its finished, it runs the rest of the code which you have passed (this code is a callback function). So you could now be seeing an empty string.

You could try two things. One would be to store the string you search for, but this could still be a pointer to the original:

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);

Alternatively try wrapping the line that is causing the fault in the same logic:

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());
            }