Polling input field in Javascript

I'm teaching myself JQuery and as practice I'm creating a page in which the user enters text in an input field and all instances of that string is found in the body of the page and highlighted. I have been able achieve this functionality when the user clicks a button, but what I'd like to get it to do is continuously poll the input field and highlight the string.

Doing a continuous poll seems to crash the page.

$(document).ready(function(){

     while(1==1){

         var str = document.input.str.value;

          $(function(){
               $('p:contains('+str+')').each(function(){
                     var regex = new开发者_如何学JAVA RegExp(str, "g");

                      $(this).html( $(this).html().replace( regex ,"<span class='hlt'>"+str+"</span>")); 
                });
            });
    }
});

Websites seem to have this kind of functionality all the time so I'm sure its doable, I just can't seem to find any info on it.

Thanks a lot!

The reason this makes your page unresponsive is that JavaScript is generally run on the same thread as the UI. That is to say, if your JavaScript is running, the rest of the page will be unresponsive. What you really want to do is one of the following:

• Using the blur event (which is fired when the input box loses focus)
• Using the change event
• Using keyup/keydown events
• Polling the input box in a non-blocking fashion using setTimeout or setInterval

If you want to observe every single change that may happen in the input box, I would recommend observing the keyboard events.

$(document).ready(function(){
    $('#inputID').keyup(function(){
        $('p:contains('+str+')').each(function(){
                 var regex = new RegExp(str, "g");
                 $(this).html( $(this).html().replace( regex ,"<span class='hlt'>"+str+"</span>")); 
        });
    });
});

If you wanted the polling approach:

$(document).ready(function(){
    var intervalID = setInterval(function(){
        //execute logic here
    }, 100); // 100 ms check
});

Let's assume your input field has the id myid. Then -

$(document).ready(function()
{
    $("#myid").change(function()
    {
        var str = document.input.str.value;

        $('p:contains('+str+')').each(function()
        {
            var regex = new RegExp(str, "g");

            $(this).html( $(this).html().replace( regex ,"<span class='hlt'>"+str+"</span>")); 
        });
    });
});

which means rather than polling for a change, you just write your highlighting code inside the change event handler, which will be automatically fired if the value in the input field changes.

$(document).ready(function() {

    // you can do this with blur event
    $("#input_id").blur(function(){
        var str = $(this).val();

        ...
    });

    // ... or keyup event, but be aware of performance issues
    $("#input_id").keyup(function(){
        var str = $(this).val();

        ...
    });
});

Any time a user will type something in your input the function binded to that event (keyup or blur) will be triggered.