PHP AJAX Pesquisa em tempo real

A pesquisa ao vivo do PHP AJAX é um recurso de pesquisa que exibe os resultados da pesquisa enquanto você digita, sem a necessidade de enviar a consulta de pesquisa. Esse recurso está se tornando cada vez mais popular em sites porque fornece uma experiência de pesquisa mais rápida e intuitiva para os usuários.

PHP é uma linguagem de programação do lado do servidor usada para criar páginas da web dinâmicas. Quando combinado com AJAX, o PHP pode ser usado para criar um recurso de pesquisa ao vivo que atualiza os resultados da pesquisa em tempo real, proporcionando uma experiência de pesquisa mais responsiva e amigável.

Com a pesquisa ao vivo do PHP AJAX, seus usuários terão acesso a resultados de pesquisa em tempo real enquanto digitam suas consultas. Esse recurso é particularmente útil para grandes conjuntos de dados, cuja pesquisa pode ser tediosa devido ao grande número de itens e à quantidade de dados por item.

Neste artigo, exploraremos a pesquisa ao vivo do PHP AJAX e como implementá-la em seu aplicativo da web. Vamos guiá-lo passo a passo e fornecer exemplos de código para ajudá-lo a começar.

Índice-

PHP AJAX Pesquisa ao vivo:

Implementando PHP AJAX Live Search

Para implementar a pesquisa ao vivo do PHP AJAX, você precisará usar HTML , JavaScript e PHP.

As etapas a seguir irão guiá-lo através do processo:

Crie um formulário de pesquisa HTML com um campo de entrada para o usuário inserir sua consulta de pesquisa.
Adicione o código JavaScript que detecta alterações no campo de entrada e envia uma solicitação AJAX para o script PHP com a consulta de pesquisa como parâmetro.
Crie um script PHP que receba o parâmetro de consulta de pesquisa e consulte o banco de dados para obter resultados relevantes.
Retorne os resultados da pesquisa para o código JavaScript usando o formato XML ou JSON.
Use JavaScript para exibir os resultados da pesquisa na página da web.

Neste artigo, demonstrarei um exemplo de pesquisa ao vivo que exibe os resultados da pesquisa conforme você digita.

Use o campo de entrada abaixo para encontrar uma página de “ introdução ao php ” para visualizar:

Existe um arquivo XML (ajaxLinkExample.xml) que contém os resultados do exemplo acima. O número de resultados neste exemplo é limitado a oito para torná-lo pequeno e simples.

Php Ajax Exemplo de pesquisa ao vivo

No campo de entrada acima, sempre que o usuário insere um caractere, a função “ showLinks() ” é executada e exibida na tela.

Um evento onkeyup é acionado quando o usuário começa a digitar:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
<head>
 <script>
  function showLinks(str) {
   if (str.length == 0) {
    document.getElementById("search").innerHTML = "";
    document.getElementById("search").style.border = "0px";
    return;
   }
   var xmlhttp = new XMLHttpRequest();
   xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 & this.status == 200) {
     document.getElementById("search").innerHTML = this.responseText;
    }
   }
   xmlhttp.open("GET", "getLinks.php?a=" + str, true);
   xmlhttp.send();
  }
 </script>
</head>
<body>
 <form>
  <input type="text" size="30" onkeyup="showLinks(this.value)">
  <div id="search"></div>
 </form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Exemplo de Explicação

A função será encerrada se o campo de entrada estiver vazio ( str.length==0 ), o que significa que o espaço reservado será limpo e o recurso de pesquisa ao vivo não será ativado.

A função showLinks() executa as seguintes instruções se o campo de entrada do formulário não estiver vazio:

Crie uma nova instância de XMLHttpRequest.
Assim que a resposta do servidor estiver pronta, crie a função que será utilizada para executar a resposta.
A solicitação será enviada para um arquivo no servidor em resposta à solicitação.
Como você pode ver na URL, um parâmetro (a) foi adicionado (que contém o conteúdo do campo de entrada).

O Arquivo PHP

Existe um arquivo PHP chamado getLinks.php no servidor que é chamado pelo JavaScript no exemplo acima.

“getLinks.php” procura um arquivo XML por títulos que correspondam à string de pesquisa e os envia para o servidor web no seguinte formato:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("links.xml");
$x = $xmlDoc->getElementsByTagName('link');
$a = $_GET["a"];
if (strlen($a) > 0) {
 $hint = "";
 for ($i = 0; $i < ($x->length); $i++) {
  $title = $x->item($i)->getElementsByTagName('title');
  $url = $x->item($i)->getElementsByTagName('url');
  if ($title->item(0)->nodeType == 1) {
   //find a link matching the search text
   if (stristr($title->item(0)->childNodes->item(0)->nodeValue, $a)) {
    if ($hint == "") {
     $hint = "<a href='" . $url->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" .
      $title->item(0)->childNodes->item(0)->nodeValue . "</a>
";
    } else {
     $hint = $hint . " <a href='" . $url->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" .
      $title->item(0)->childNodes->item(0)->nodeValue . "</a>
";
    }
   }
  }
 }
}
if ($hint == "") {
 $response = "no suggestion";
} else {
 $response = $hint;
}
echo $response;
?>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Exemplo de Explicação

Neste código PHP, estamos criando um novo objeto DOMDocument e carregando um arquivo XML chamado “links.xml”. Estamos então obtendo todos os elementos do link do arquivo XML usando o método getElementsByTagName e armazenando-os na variável $x . Também estamos obtendo um parâmetro chamado “a” usando $_GET[“a”] .

Se o comprimento do parâmetro “a” for maior que 0, entramos em um loop que passa por cada elemento do link. Para cada link, obtemos seus elementos de título e url usando getElementsByTagName. Se o elemento title contiver um nó filho cujo valor corresponda ao parâmetro “a”, criamos um link HTML com o valor do elemento title e o valor do elemento url e o armazenamos na variável $hint .

Se não houver correspondências, a variável $response é definida como “sem sugestão”. Caso contrário, a variável $response é definida com o valor de $hint.

Por fim, repetimos a variável $response para exibir os resultados da pesquisa na página.

Resumindo, esse código pesquisa em um arquivo XML links cujos títulos correspondem a um determinado termo de pesquisa e os exibe como links HTML na página.

Vantagens do PHP AJAX Live Search

Resultados de pesquisa mais rápidos: com a pesquisa ao vivo do PHP AJAX, os resultados da pesquisa são exibidos em tempo real conforme o usuário digita. Isso fornece uma experiência de pesquisa mais rápida e intuitiva para os usuários.
Experiência do usuário aprimorada: o recurso de pesquisa ao vivo melhora a experiência do usuário, tornando mais fácil e rápido para os usuários encontrarem as informações de que precisam.
Carga de servidor reduzida: como apenas os resultados de pesquisa relevantes são retornados, a carga do servidor é reduzida, resultando em tempos de resposta mais rápidos e melhor desempenho do servidor.

Conclusão

Em conclusão, uma pesquisa ao vivo PHP AJAX é uma ferramenta poderosa que pode melhorar muito a experiência de pesquisa em seu site.

Seguindo as etapas descritas neste artigo, você pode criar facilmente uma pesquisa ao vivo PHP -AJAX para seu site e fornecer aos usuários uma experiência de pesquisa mais eficiente e amigável.

Você pode ajudar outras pessoas a aprender sobre o poder e a elasticidade do PHP e do AJAX compartilhando nosso artigo nas mídias sociais abaixo. Isso permitirá que eles criem aplicativos da Web dinâmicos e interativos.

Nós valorizamos o seu feedback.

PHP AJAX Pesquisa em tempo real

Implementando PHP AJAX Live Search

Php Ajax Exemplo de pesquisa ao vivo

Example:

Exemplo de Explicação

O Arquivo PHP

Example:

Exemplo de Explicação

Vantagens do PHP AJAX Live Search

Conclusão

Sentindo entediado?