jQuery затухающие ячейки при получении определенного ввода

Question

У меня есть вход и таблица с некоторыми ячейками. Я новичок с JQuery и дядя Google не может решить мою проблему, так что здесь вы идете:

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

А как сейчас ... я получил некоторую функцию, которая автозаполнения слов, когда вы набираете, все отлично , он показывает список совпадающих слов под полем, и теперь, когда я нажимаю на один из этих слов, я хотел бы угаснуть некоторые ячейки.

я придумал что-то вроде этого:

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

Это работает, но я должен нажать на поле дважды - при вводе текста и получил подходящее слово первый щелчок в списке и исчезать из ячейки второй щелчок по полю ... Я хотел бы сразу же его удалить сразу после первого щелчка. Как я могу улучшить этот код?

Answer 1

попробовать это: (это то, что вы хотите достичь):

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

работает скрипку здесь: http://jsfiddle.net/M4KgL/1/