Validação com AJAX de uma Array

[Jhess 46]

Olá pessoal, tô com um probleminha no meu código, eu tenho uma array com pelo menos 300 keys, peguei esse exemplo: https://www.w3schools.com/js/js_ajax_php.asp

 

Ele funciona, mas se eu digito: "a" aparece vários registros, meu querer é o seguinte: Se eu digitar: "jesse.pereira" > echo "Usuário válido". Se eu digitar "jesse.pereir" > echo "Usuário inválido".

[Matheus Tavares 167]

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).

[Jhess 46]

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.

[Matheus Tavares 167]

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.

[Jhess 46]

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

[Matheus Tavares 167]

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

[Jhess 46]

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. :/

[Matheus Tavares 167]

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.

[Jhess 46]

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 :/