-1
<form class="pesquisa">
    <input type="search" class="texto" list="historico" placeholder="Pesquisar gêneros ..." />
    <img src="imagem/lupa.jpg" class="btn" onclick="executar()">
    <datalist id="historico">
        <option value = "Indie"> </option>
        <option value = "Rock"> </option>
    </datalist>
</form>

<script>
function excecutar()
{

    var texto=document.getElementById/('texto').valueOf;
    var lista=document.getElementById('historico');
    var adicionar=true;
    var opt= document.createElement('option');

    for(i=0; i <lista.option.lengh;i++){
        if(texto==lista.option[i].value){
          adicionar=false;
        }
    }

    if(adicionar==true){
        opt.value=texto;
        lista.appendChild(opt);
    }

}
</script>

É uma página com gêneros musicais e quero que busque o conteúdo da mesma página, parecido com a ancora mas a diferença e que terá opção de busca.
O problema é que apesar de mostrar as opções de preenchimento na pesquisa ele não efetua a pesquisa, não aparece nada.

7
  • Explique melhor a sua dúvida, o datalist por si só já é um auto completar, pelo que entendi no seu código é que se não houver o que foi digitado, o código deve inserir o novo valor na lista? Fiquei confuso.
    – ElvisP
    30/07/2020 às 0:20
  • Não é bem isso, só quero que ele busque as palavras e redirecione ao conteúdo correspondente. Usei a opção de mostras a sugestão de respostas na busca, somente para facilitar na busca. Mesmo selecionando as opções ele não busca o conteúdo. 30/07/2020 às 3:30
  • Mas buscar o conteúdo que está onde? em algum elemento? banco de dados? outra página? qual método de envio de dados para a busca você quer utilizar?
    – ElvisP
    30/07/2020 às 15:38
  • Buscar na propria página igual quando se usa o id para ancora. O conteudo ira estar na pagina html onde estara as musicas, e entao pesquisa e na mesma pagina. 30/07/2020 às 17:04
  • Que busque na mesma página, sera um pagina com muito conteudo e por isso precisa da pesquisa, e igual o id que se usa para pesquisar na mesma pagina mas quero que tenha como escrever na pesquisa e pesquisar na mesma pagina e isso e algo que nao estou conseguindo. 30/07/2020 às 17:32

1 Resposta 1

0

Pressupondo pelo o que entendi, você quer adicionar o valor inserido no campo texto e adicionar na lista se não existir, e se existir, não faz nada.

function executar( )
{
    
    var texto   = document.getElementById('texto').value;
    var lista   = document.getElementById('historico');
    var options = lista.getElementsByTagName('option');
    var newOpt  = document.createElement('option');
    var optSet  = 1;
    
    for (var i = 0; i < options.length; i++) 
    {
        console.log(options[i].value + " --- " + texto);
        if ( texto == options[i].value )
        {
            optSet = 0;
            return false;
        }
    } 

    if( optSet == 1 )
    {
        newOpt.value=texto;
        lista.appendChild(newOpt);
        window.alert('Adicionado');
    }
}
<form class="pesquisa">
    <input type="search" id="texto" list="historico" placeholder="Pesquisar gêneros ..." />
    <img src="imagem/lupa.jpg" class="btn" onclick="executar();">
    <datalist id="historico">
        <option value="Indie">
        <option value="Rock">
        <option value="New Age">
        <option value="Grunge">
    </datalist>
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .