In jQuery, how to detect specified string while user is typing it?

Question

Much like when typing a comment on Facebook and you hit @username, it reacts to that, letting you choose a username inline.

Using jQuery, how would one go about hooking up an event listener for [text:1]. I want an event to fire when the user has entered [text: into a text field.

Mark Brown · Accepted Answer · 2011-03-07 04:45:09Z

4

Zurb created a textchange plugin that will help. See their "Validate Text" example towards the bottom, i believe its almost exactly what you're looking for..

http://www.zurb.com/playground/jquery-text-change-custom-event

answered Mar 7, 2011 at 4:45

Mark Brown

12.5k8 gold badges30 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

S L · Accepted Answer · 2011-03-07 04:30:04Z

use keyup function to trigger. Split all the string and check it.

[UPDATE]: More Improved Version

<script>

var totalcount=0;

$(function (){

    $('#text').keyup(

        function (){

              var arr = $(this).val().split(" ");

              var matchitems = count('hello', arr);

              //console.log(matchitems);

              if(matchitems > totalcount){
                alert('hello');
                totalcount = matchitems;
              }
              if(matchitems < totalcount)
              {
                totalcount = matchitems;
              }

        }
    )

})

function count(value, array)
{
    var j=0;

    for(var i=0;i<array.length;i++)
    {

        if(array[i] == "hello"){
            j++;    
        }
    }
    return j;
}

</script>

<input type="text" id="text" />
})

</script>

<input type="text" id="text" />

hellatan · Accepted Answer · 2011-03-07 04:51:00Z

1

Using keyup like @experimentX mentioned is the way you want to go b/c then you'll know that your user has inputed value then. However, running a for loop would be extremely costly on every single keyup event. Instead, since you know the value you want already, you can use a preset regexp to search for your value:

<input type="text" id="text" value="" />

<script>
    $(function () {
        var $input = $('#text');
        $input.keyup(function (e) {
            var regexp = /\[text\:/i,
                val = $(this).val();
            if (regexp.test(val)) {
                console.log('i have it: ', val);
            }
        });
    });
</script>

Here are a couple additional scenarios on how you can write the actual regexp.

You want the string to be at the very beginning of the input: var regexp = /^\[text\:/i;
Building on the one above, but incorporate any amount of whitespace in front of the text you actually want: var regexp = /^\s+?\[text\:/i;

answered Mar 7, 2011 at 4:51

hellatan

3,5873 gold badges31 silver badges38 bronze badges

3 Comments

S L Over a year ago

sure your concept is impressive too, but you have one mistake ... (eveytime it will write to console.log for a single match ). see my imrpoved version. Cant you find the no of matches and improve yours too ? however +1 for reqex concept

Chaddeus Over a year ago

Yes, I tried this code as well. Without the # of matches code, it will match on every keyup, even after action has already been taken on the first match.

Chaddeus Over a year ago

Though, I was able to take that regex and use it for another purpose. Thanks!

Collectives™ on Stack Overflow

In jQuery, how to detect specified string while user is typing it?

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related