O uso de Ajax (Asynchronous JavaScript and XML) em conjunto com JavaScript pode fornecer uma experiência mais rápida e responsiva ao usuário em sua aplicação web.

Neste artigo, vamos mostrar como criar um sistema de busca com JavaScript e Ajax.

Passo 1: Estrutura HTML

<form>
  <input type="text" id="searchInput" placeholder="Digite sua pesquisa">
  <button type="submit" id="searchButton">Pesquisar</button>
</form>

<div id="searchResults"></div>

Passo 2: Escrevendo o JavaScript

Agora vamos escrever o código JavaScript para lidar com a submissão do formulário e a exibição dos resultados da pesquisa.

Usaremos o método addEventListener() para detectar o evento de envio do formulário e, em seguida, usaremos o objeto XMLHttpRequest para fazer a solicitação de pesquisa no servidor.

const form = document.querySelector('form');
const searchInput = document.querySelector('#searchInput');
const searchButton = document.querySelector('#searchButton');
const searchResults = document.querySelector('#searchResults');

form.addEventListener('submit', function(event) {
  event.preventDefault();
  
  // Obter o valor do campo de entrada
  const query = searchInput.value;
  
  // Enviar a solicitação para o servidor
  const xhr = new XMLHttpRequest();
  xhr.open('GET', `/search?q=${query}`, true);
  
  xhr.onload = function() {
    if (this.status === 200) {
      const results = JSON.parse(this.responseText);
      
      // Limpar os resultados anteriores
      searchResults.innerHTML = '';
      
      // Exibir os novos resultados
      results.forEach(function(result) {
        const div = document.createElement('div');
        div.innerHTML = `<h2>${result.title}</h2><p>${result.description}</p>`;
        searchResults.appendChild(div);
      });
    }
  }
  
  xhr.send();
});

No código acima, usamos o método preventDefault() para evitar que o formulário seja enviado normalmente e, em vez disso, enviaremos uma solicitação Ajax ao servidor.

Usamos o método open() do objeto XMLHttpRequest para definir o método de solicitação (GET ou POST) e o URL para a pesquisa.

Em seguida, usamos o método onload para lidar com a resposta do servidor.

Se a resposta tiver um código de status 200 (OK), analisamos os resultados da pesquisa (que foram enviados como JSON) e exibimos os resultados na div #searchResults.

Passo 3: Criando o servidor

Para que nosso código JavaScript funcione, precisamos criar um servidor que possa lidar com as solicitações de pesquisa.

Vamos usar o Node.js e o pacote Express para criar um servidor simples que retornará resultados de pesquisa aleatórios quando solicitados.

const express = require('express');
const app = express();

app.use(express.static('public'));

app.get('/search', function(req, res) {
  const query = req.query.q;
  
  // Gerar resultados aleatórios
  const results = [
    {
      title: 'Result 1',
      description: 'Description of result 1.'
    },
    {
      title: 'Result 2',
      description: 'Description of result 2.'
    },
    {
      title: 'Result 3',
      description: 'Description of result 3.'
    }
  ];

  // Filtrar resultados por consulta
  const filteredResults = results.filter(function(result) {
    return result.title.toLowerCase().includes(query.toLowerCase()) || result.description.toLowerCase().includes(query.toLowerCase());
  });

  res.json(filteredResults);
});

app.listen(3000, function() {
  console.log('Server is listening on port 3000');
});

Este código utiliza o framework Express para criar um servidor e implementar uma rota para lidar com consultas de pesquisa.

O servidor recebe consultas de pesquisa através da rota /search e filtra os resultados aleatórios gerados com base na consulta recebida.

O servidor responde com os resultados filtrados em formato JSON. O código utiliza também o módulo express.static para servir arquivos estáticos do diretório "public".

Depois de criar a parte HTML e CSS da página de busca, é hora de adicionar a funcionalidade de busca usando JavaScript e Ajax.

Para isso, primeiro precisamos adicionar um evento de clique ao botão de busca usando o método addEventListener() do JavaScript.

Em seguida, dentro da função de clique, vamos enviar uma solicitação de busca para o servidor usando o objeto XMLHttpRequest do Ajax.

O código abaixo mostra como podemos adicionar o evento de clique e enviar a solicitação de busca:

const searchBtn = document.getElementById('searchBtn');

searchBtn.addEventListener('click', function() {
  const searchTerm = document.getElementById('searchTerm').value;
  const xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const searchResults = document.getElementById('searchResults');
      searchResults.innerHTML = xhr.responseText;
    }
  }

  xhr.open('GET', `search.php?q=${searchTerm}`, true);
  xhr.send();
});

Nesse exemplo, estamos pegando o termo de pesquisa digitado pelo usuário usando o método getElementById() do JavaScript.

Em seguida, criamos um objeto XMLHttpRequest e definimos sua função onreadystatechange() para lidar com a resposta da solicitação de busca.

Quando a resposta estiver pronta, verificamos se o status da resposta é 200 (que significa que a solicitação foi bem-sucedida) e, em seguida, atualizamos a parte da página que exibe os resultados da pesquisa com a resposta da solicitação usando o método innerHTML.

Por fim, abrimos a solicitação de busca usando o método open() do Ajax, passando o termo de pesquisa como um parâmetro na URL da solicitação, e enviamos a solicitação usando o método send().

Implementando a funcionalidade de busca com Ajax

Para implementar a funcionalidade de busca utilizando Ajax, podemos utilizar a biblioteca jQuery, que oferece funções simplificadas para realizar requisições assíncronas em JavaScript.

Primeiro, vamos criar uma função para realizar a requisição Ajax quando o usuário digitar algo na barra de pesquisa:

function search() {
  $.ajax({
    type: 'GET',
    url: '/search', // endpoint da API que irá retornar os resultados da busca
    data: { query: $('#search-input').val() }, // valor da barra de pesquisa
    success: function(data) {
      // manipular os dados retornados pela API
    },
    error: function() {
      // tratar erros de requisição
    }
  });
}

Aqui, estamos realizando uma requisição GET para o endpoint /search com o parâmetro query, que contém o valor da barra de pesquisa.

Quando a requisição for concluída com sucesso, a função success será chamada com os dados retornados pela API.

Agora, precisamos definir o comportamento da função success.

Uma opção seria renderizar os resultados da busca diretamente no navegador, mas isso exigiria que a API retornasse um HTML completo para cada resultado da busca.

Uma abordagem mais eficiente seria retornar apenas os dados relevantes em formato JSON e manipulá-los com JavaScript para renderizar a lista de resultados.

Para fazer isso, podemos adicionar o seguinte código à função success:

success: function(data) {
  var results = JSON.parse(data); // converter a string JSON em objeto JavaScript
  var listItems = results.map(function(result) {
    return '<li>' + result.title + '</li>'; // criar um item de lista com o título do resultado
  });
  $('#search-results').html('<ul>' + listItems.join('') + '</ul>'); // renderizar a lista de resultados na página
},

Aqui, estamos convertendo a string JSON retornada pela API em um objeto JavaScript, criando um item de lista para cada resultado da busca e, finalmente, renderizando a lista na página.

Conclusão

Neste artigo, aprendemos como criar um sistema de busca básico com JavaScript e Ajax.

Essa funcionalidade é essencial em muitos tipos de aplicativos web, permitindo aos usuários encontrar facilmente informações relevantes em grandes conjuntos de dados.

Combinado com técnicas de design responsivo e boas práticas de usabilidade, um sistema de busca bem projetado pode tornar sua aplicação mais útil e agradável de usar para os usuários.