$("document").ready(function() {

        var target = "#suggestion"; // ID da div onde será exibido as sugestões
        var searchinp = "#palavra-chave"; // ID do input
		var formid = "#search"; // ID do form
		
		//Verifica se o campo está preenchido e limpa
		$(searchinp).click(function(){
			if($(this).val() == "Digite o que proucura..."){
				$(this).val("");	
			}
		});
		
		//Verifica se o campo esta vazio e adicionar a frase
		$(searchinp).focusout(function(){
			if($(this).val() == ""){
				$(this).val("Digite o que proucura...");	
			}
		});

        // Esse evento será executado quando a pessoa digitar alguma coisa no input
        $(searchinp).keyup(function() {
        
                // Setamos a var search para o value do input
                var search = $(this).val();
                
                // Se estiver vázia esconde a div de resultados, caso contrário envia os dados para página de busca e exibe as sugestões
                if(search == "") {  
                        $(target).hide();
                } else {
                        $.ajax({type: "POST", url: "http://www.epatos.com.br/autocomplete.php", data: "search=" + search, success: function(data) { $(target).fadeIn("slow").html(data); }});  
                }
        });

        // Quando alguma sugestão for clicada, o valor do rel dela irá para o input e a div de sugestões será escondida
        $(".results").live("click", function(e) {
                e.preventDefault();
                $(searchinp).val($(this).attr("rel"));
                $(target).hide();
				$(formid).submit();

        });
        
        // Se houver um clique e a div de sugestões estiver visível ela será escondida
        $("*").click(function() {
                if(!$(target).is(":hidden")) {
                        $(target).hide();
                }
        });

});