#Resposta:
Não precisa de nada do que você está fazendo, você pode apenas utilizar o atributo `placeholder` do `<input>` desta maneira:

<!-- language: lang-html -->

    <input type="text" class="pesquisa-class" placeholder="Digite o produto desejado..." value="">

#Explicação:
Utilizar [tag:javascript] pra fazer o que você precisa, não seria necessário pois os `<input>`'s do [tag:html] contém alguns atributos que facilitam muitas coisas, dentre eles o `placeholder` seria o atributo mais indicado para o que você quer fazer.

O placeholder é a maneira mais moderna de informar o usuário o que ele tem que digitar no tal campo, anteriormente utilizamos Label's que seriam textos acima do campo.

#[Documentação do placeholder][1]

#Compatibilidade:
Testado e funcionando nos seguintes navegadores:

 - Mozilla Firefox (27.0)
 - Google Chrome (32.0)
 - Safari (5.1.7)
 - Opera (12.16)
 - Internet Explorer (IE11,IE10)

**Não funciona nos seguintes navegadores:**

 - Internet Explorer(IE9,IE8,IE7)

#[Solução para navegadores não compatíveis][2]:

Utilizando uma função chamada `placeholder()`:

    function placeholder(str){
        $('input').css('color','#ccc');
        $('input').val(str);
    }

Você deve executa-la uma vez ao carregar sua página:

    placeholder("Digite o produto desejado...");

E deve atribuir estes eventos ao seu input, que seria `ao clicar nele`(click) limpar o valor dele, e `ao sair dele`(blur) colocar o placeholder novamente.


    $('input').on("click", function () {
      $(this).val('');
    });
    $('input').on("blur", function () {
        placeholder("Digite o produto desejado...");
    });


  [1]: http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-placeholder-attribute
  [2]: http://jsfiddle.net/RfK5h/2/