Validação com AJAX de uma Array

Você deveria fazer algo assim:

<?php
$nomes = [
'Anna',
'Brittany',
'Cinderella',
'Diana',
'Eva',
'Fiona',
'Gunda',
'Hege',
'Inga',
'Johanna',
'Kitty',
'Linda',
'Nina',
'Ophelia',
'Petunia',
'Amanda',
'Raquel',
'Cindy',
'Doris',
'Eve',
'Evita',
'Sunniva',
'Tove',
'Unni',
'Violet',
'Liza',
'Elizabeth',
'Ellen',
'Wenche',
'Vicky',

];

$nomes_em_minusculo = array_map( 'mb_strtolower', $nomes );
$pesquisa = $_REQUEST[ 'q' ];

$encontrou = in_array( mb_strtolower( $pesquisa ), $nomes_em_minusculo, true );

echo $encontrou ? 'válido' : 'inválido';

	 

	Observe que eu converti a busca e os nomes para minúsculas. Isso é para a busca ser case-insensitive (não faz diferença se foi digitado "A" ou "a"). O mesmo princípio deveria ser feito para fazer funcionar com acentos também (removê-los na hora da busca).

Olá @Matheus Tavares, muito obrigado por me responder, deu certo aqui, mas quando digito muito rápido, ele alterna: "válido" | "inválido" lentamente, e quando digito rápido e o nome está na array, às vezes dá inválido, deve ser a lentidão.

Sim... o script PHP não tem relação com isso.

Você pode melhorar um pouco a lentidão otimizando seu JS, mas o tempo de cada requisição é inevitável.

Valeu mestre, estou enviando muitas requisições para a página, a cada letra digitada ou apagada ele requisita, então coloquei pra requisitar apenas no OnBlur do input, foi o melhor jeito que achei

>

16 minutos atrás, Jesse&Francinete disse:

coloquei pra requisitar apenas no OnBlur do input, foi o melhor jeito que achei

É uma solução...

Outra ainda, se você tiver um tempinho sobrando, poderia ser:

1 - Cada tecla digitada, capturada com o evento Input, não Key(Up|Press|Down), você roda um setTimeout de digamos, 200ms.

2 - Se o usuário digitar algo novamente, você cancela o timeout anterior e reinicia o contador.

3 - Quando ele não digitar nada por um período maior que o definido no timeout (200ms, no caso), você chama o AJAX.

Existem materiais a respeito:

1 - Biblioteca (não conheço, mas olhando rapidamente me parece que faz o que eu mencionei acima): https://github.com/rtheunissen/jquery-input-timeout

2 - Pequena solução pronta: https://stackoverflow.com/questions/17029211/how-to-add-a-wait-timer-on-an-input-field-keyup-event

Valeu, dei uma lida, porém não funcionou, o OnBlur executa essa função:

 function showHint() {
 var str = document.getElementById("validacao").value;
 document.querySelector("[name='validacaoSalva']").value = str;
 var xhttp;
 if (str.length == 0) {
 document.getElementById("txtHint").innerHTML = '<span style="color:red;"><i class="fa fa-remove" aria-hidden="true"></i> Nenhum usuário inserido</span>';
 return;
 }
 xhttp = new XMLHttpRequest();
 xhttp.onreadystatechange = function() {
 if (this.readyState == 4 && this.status == 200) {
 document.getElementById("txtHint").innerHTML = this.responseText;
 }
 };
 xhttp.open("GET", "get_user.php?q=" + str, true);
 xhttp.send();
 }

	 

	Tentei chamar ela aqui:

	 

var timeout = null;
$('#validacao').on('keyup', function () {
 var that = this;
 if (timeout !== null) {
 clearTimeout(timeout);
 }
 timeout = setTimeout(function () {
 showHint();
 }, 1000);
});

	Porém, sem resultado. :/

Seu primeiro código está em JS nativo.

Já o segundo, do link que eu havia postado, está em jQuery (o que exigiria você incluir a lib na sua página).

Em JS nativo (ES5) seria mais ou menos assim (não testei):

var input = document.getElementById( 'meu-input' );
var timeout = null;

input.addEventListener( 'input', function( event ) {
 if (timeout !== null)
 clearTimeout( timeout );

 timeout = setTimeout( function () {
 fazerRequisicao();//mudar aqui
 }, 2000);
}, false );

	 

	Mas o que interessa é você entender a lógica... estude esse código, é bem pequeno.

>

3 minutos atrás, Matheus Tavares disse:

Mas o que interessa é você entender a lógica... estude esse código

Sim, preciso estudar bastante JS, tenho usado muito ele, porém ainda continuo sem sucesso, o código não funcionou :/