I can’t make the page search box work

Asked

Viewed 46 times

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

It is a page with musical genres and I want you to search the content of the same page, similar to the anchor but the difference and you will have search option.
The problem is that although it shows the fill options in the search it does not perform the search, nothing appears.

javascript html5

  • Explain your question better, the datalist itself is already an auto complete, so I understood in your code is that if there is not what was typed, the code should enter the new value in the list? I was confused.

  • Not really, I just want him to search the words and redirect to the corresponding content. I used the option of showing the suggestion of answers in the search, only to facilitate in the search. Even selecting the options it does not search the content.

  • But search the content that is where? in some element? database? another page? which method of sending data to the search you want to use?

  • Search on own page equal when using id for anchor. The content will be on the html page where the music will be, and then search and on the same page.

  • To search on the same page, it will be a page with a lot of content and therefore it needs the search, it is the same id that is used to search on the same page but I want it to have how to write in the search and to search in the same page and that is something that I am not getting.

  • checks that the contents of this page are equal, https://www.jqueryscript.net/demo/Search-Keyword-Highlighting-Plugin-With-jQuery-Highlite/

  • It is similar to the one you sent but I want when writing word it leads to the part of the page with the content searched. Because I will make a single page for the genre music and there will be some generos and in the research needs that when writing the genre it send to the part with that.

Show 2 more comments

1 answer

0

Assuming from what I understand, you want to add the value inserted in the text field and add it to the list if it doesn’t exist, and if it does, it does nothing.

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>

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.