jQuery fading cells when got specific input

Question

I got a input and table with some cells. I'm newbie with jQuery and uncle google couldn't resolve my problem, so here you go:

<input type='text' id='myinput' value='' />
<table class="main">
    <tr>
        <td id="cells">Some cells</td>
    </tr>
</table>

And how about now... I got some function which autocomplete words when you typing, all is fine, it shows list of matched words under the field and now when I click on the one of this words I would like to fade some cells.

I came up with something like that:

$('#myinput').focus(function() {
   if( $(this).val() == "dog") {
      $('#cells').animate({'opacity':'0.2'},1000, function() {
        $('#myinput').val('').css('opacity','1');
      });
   }
});

It works, but I have to click on the field twice - when typing and got matched word its first click on the list and to fade out cell is the second click on the field... I would like to fade it immediately after first click. How can I improve that code?

Answer 1

try this: (is that what you wanted to achieve):

$('#myinput').change(function() {
   if( $(this).val() == "dog") {
      $('#cells').animate({'opacity':'0.2'},1000, function() {
        $('#myinput').val('').focus();
         $('#cells').css('opacity','1');
      });
   }
});

working fiddle here: http://jsfiddle.net/M4KgL/1/