Polling input field in Javascript

Question

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 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!

Matt · Accepted Answer · 2011-07-05 20:44:52Z

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

MD Sayem Ahmed · Accepted Answer · 2011-07-05 20:43:07Z

4

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.

edited Jul 5, 2011 at 20:43

answered Jul 5, 2011 at 20:36

MD Sayem Ahmed

29.3k27 gold badges115 silver badges183 bronze badges

2 Comments

danem Over a year ago

Oh, wow. Very simple solution. Thanks. One thing I noticed was that it only executed the function once focus was lost. While this isn't the worst thing ever of course, I'd be interested to see if there was a way around that.

MD Sayem Ahmed Over a year ago

@Pete: If you want to execute your highlighting code even if the focus isn't lost, then use keyup or keydown event instead of change event. In that case, just replace change with either keyup or keydown in the above code.

Dumitru Ceban · Accepted Answer · 2011-07-05 20:48:36Z

1

$(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.

answered Jul 5, 2011 at 20:48

Dumitru Ceban

6404 silver badges8 bronze badges

Collectives™ on Stack Overflow

Polling input field in Javascript

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related