Olá Pessoal,
Estou fazendo um site e para isso preciso de fazer um sistema de busca interna onde ele apresenta os resultados e tbm uma mensagem (que pode ser o um alert) caso o objeto pesquisado não tenha no site. Olhando tutoriais, fiz esse codigo:
HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="buscador.css">
<title>Buscador</title>
</head>
<body>
<div class="buscador">
<form action="" method="submit" class="pesquisa">
<input type="texte" name="buscador" value="" placeholder="O que vamos ver hoje?" id="buscar"
onkeyup="pesquisa()">
<button type="submit">Enviar</button>
</form>
</div>
<div class="filmes">
<ul id="disponiveis">
<li>
<a href="#">Soldado Ryan</a>
</li>
<li>
<a href="#">Rambo</a>
</li>
<li>
<a href="#">Vingadores</a>
</li>
<li>
<a href="#">O homem que copiava</a>
</li>
<li>
<a href="#">Legalmente Loira</a>
</li>
<li>
<a href="#">Jurassic Park</a>
</li>
<li>
<a href="#">O pianista</a>
</li>
<li>
<a href="#">Imperio do Sol</a>
</li>
<li>
<a href="#">13 Horas</a>
</li>
<li>
<a href="#"> Alladin</a>
</li>
<li>
<a href="#"> Speed Racer</a>
</li>
<li>
<a href="#"> Circulo de Fogo</a>
</li>
</ul>
</div>
<script src="pesquisa.js"></script>
</body>
</html>
JS
function pesquisa() {
var busca;
var filtro;
var ul;
var li;
var a;
var i;
busca = document.getElementById("buscar");
filtro = busca.value.toUpperCase();
ul = document.getElementById("disponiveis");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filtro) > -1) {
li[i].style.display = "";
}
else {
li[i].style.display = "none";
}
}
}
O codigo funciona, mas não consigo incluir a mensagem caso o item desejado não tenha na lista. Podem me ajudar?