Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal.
Tenho um sistema de busca que, quando .eu digito um texto no campo nome e clico no botão, o sistema faz a busca de todos os nomes.
Mas eu gostaria que quando eu digitasse nesse campo nome e automaticamente já ia aparecendo os resultadas.
Agradeço desde já.
Oi Gabriel, eu gostaria de saber se esse código dá o resultado também ou somente faz a ação?
Agradeço desde já.
Neste trecho:
for(i in json.result_data){
$('#search-results').append('<li>' . json.result_data[i].name);
}Oi Gabriel, eu não sou bom em java e tenho conhecimento em PHP. O mais que sei é o básico do básico em java.
Então não estou conseguindo implementar esse código no form.
Preciso só que dá ação automática ao digitar um texto no campo.
Se puder, gostaria que me ajudasse na implementação.
Fico no aguardo e agradeço.
Primeiramente: Java ≠ JavaScript.
Bom, vamos lá.
No arquivo search.php (ou qualquer outro arquivo que contenha a busca) vou retornar um JSON com os resultados.
Para o script (JavaScript) que te passei, é necessário o framework jQuery.
No arquivo em que esse JavaScript estiver, vamos supor que ele irá ser exibido na div#search-result:
<div id="search-result"></div>
Este trecho:
data: {
search_type: 'json',
search_term: searchTerm
},
diz que duas requests vão ser passadas via GET: search_type e search_term.
search_type não é totalmente necessário, caso o resultado ser sempre em JSON, já o search_term o o termo da busca, mas essas nomenclaturas podem mudar, por exemplo, se na sua página de busca (search.php no exemplo) estiver de outra forma, como esta:
$search_term = $_GET['q'];
Você também pode passar esses parâmetros na URL:
em vez de
url: '/search.php',
data: {
search_type: 'json',
search_term: searchTerm
},
isso
url: '/search.php?search_type=json&search_term=' + searchTerm,
Dai, toda vez que você digitar algo no input#search-input
$('#search-input').keyup(function(){ //<input type="text" id="search-input" />
ou qualquer outro id, ele vai enviar essa request pra página PHP da busca e retornar o resultado em JSON:
dataType: 'json',
Já aqui:
success: function(json){
for(i in json.result_data){
$('#search-results').append('<li>' . json.result_data[i].name);
}
}for(i in json.result_data){
com todos os resultados que estão dentro de result_data e vão adicionar cada um à div#search-term.
Aqui fiz um exemplo de implementação:
Suponhamos que o resultado de sua busca, ao digitar determinado termo no campo de busca, retornou esse JSON:
{
"result_data": [
{
"name": "Gabriel",
"age": "14"
},
{
"name": "João",
"age": "15"
}
]
}
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
var searchTerm;
$('#search-input').keyup(function(){
searchTerm = $(this).val();
if(searchTerm != ''){
$.ajax({
url: '/search.php',
data: {
search_type: 'json',
search_term: searchTerm
},
dataType: 'json',
success: function(json){
$('#search-results').html('');
for(i in json.result_data){
$('#search-results').append('<li>' . json.result_data[i].name);
}
}
});
}
});
</script>
</head>
<body>
<input type="text" id="search-term" placeholder="Buscar..." />
<h2>Resultado da busca:</h2>
<div id="search-result"></div>
</body>
</html>DOCUMENTAÇÃO:
Isso se faz com jQuery feat. PHP.
Por exemplo, você cria uma página PHP que retorna a busca em formato JSON, depois, cria um evento no jQuery (pode ser VanillaJS mesmo) pra quando o usuário digitar algo, automaticamente um AJAX traz os resultados dessa busca.
Exemplo: