Criando uma barra de busca com jQuery

Criando uma barra de busca com jQuery


 

1. Objetivo

Esta barra foi feita de forma bem simples e foi feita para ser usada junto com o Ajax para importar os dados da API.

É o jeito mais simples, futuramente você pode utilizar outros métodos, adicionar um CSS ao seu html, colocar um botão de "enviar", etc.

2. Criando a parte HTML do seu código

Vamos lá, primeiramente, você deve criar um espaço para que o usuário possa digitar a busca.

Você pode fazer de diversas formas, adicionar um botão ou da forma que desejar. Aqui vamos utilizar o modo de input mais simples:
 

	<input type="text" id="kw" name="keyword"/>

Deveremos capturar a partir desse input strings como "tv LED", "notebook 4GB", etc. e utilizar como parâmetros na nossa busca por produtos com essas keywords. Para isso, vamos construir um script utilizando jQuery.

3. Script para seu input

Vamos construir um script para ter esse valor no formato correto para se colocar como parâmetro na URL.

 

$("#kw").keydown(function(event) {   //Inicia função quando usuário apertar enter
   if(event.keyCode == 13) {           
      var keyword = $("#kw").val();   //Coloca o que o usuário digitou na variável keyword.
      keyword = keyword.trim();   //Tira possíveis espaços no começo e final da palavra.
      keyword = keyword.replace(/\s+/g, "+");   //Troca espaços por "+" nos parâmetros digitados pelo usuário.
      params = "keyword=" + keyword;   // Forma os parâmetros da URL.
   }
});

 

Opicionalmente, você pode adicionar ao final de params a string "&format=json" e/ou "&sourceId=xxxxx" de acordo com o que for necessário.

4. Aplicando no service

Numa busca, geralmente procuramos por uma lista de produtos. Então utilizaremos o service findProductList.

No parâmetro "url" do Ajax (Tutorial para usar o service), você deve colocar a seguinte string:
 

	url: "sandbox.buscape.com/service/findProductList/{sua application Id}/?" + params

Agora basta adicionar seu css em seu código, e tudo pronto!