<input type="text" autocomplete="off" class="search_field" style="color:white;border-color:white; font-weight:bold;" value="" name="filtroricerca" id="filtroricerca" placeholder="cerca..." oninput="filtroRicercaSuggerimento();">

<ul id="suggerimenti"></ul>

 

In Javascript dichiarare globalmente:

var listaProdotti = [];

Riempire con il codice C# o in javascript:

Esempio C#:

 @foreach (var prodotti_ricerca in Model.ListaProdotti.OrderBy(x => x.DESCRIZIONE))
 {
     <script>
             listaProdotti.push("@prodotti_ricerca.DESCRIZIONE");
     </script>
 }

Introdurre la funzione del suggerimento richiamato dall'onclick del input text:

function filtroRicercaSuggerimento() {
    var inputVal = $('#filtroricerca').val().toLowerCase();
    var suggerimenti = [];

    if (inputVal.length > 0) {
        suggerimenti = listaProdotti.filter(function (prodotto) {
            return prodotto.toLowerCase().includes(inputVal);
        });
    }

    // Mostra i suggerimenti nella lista suggerimenti
    var suggerimentiLista = $('#suggerimenti');
    suggerimentiLista.empty();

    suggerimenti.forEach(function (suggerimento) {
        suggerimentiLista.append('<li onclick="selezionaSuggerimento(\'' + suggerimento + '\');">' + suggerimento + '</li>');
    });
}

Introdurre la funzione per l'onlick sul suggerimento:

 function selezionaSuggerimento(descrizione) {
     document.getElementById("filtroricerca").value = descrizione;
     filtraRicerca();
 }

Introdurre la funzione che prema il tasto submit in automatico:

function filtraRicerca() {
    var filtroricerca = document.getElementById("filtroricerca").value;
    $("#ricerca_testo").val(filtroricerca.toString());
    $("#conferma_ricerca").click();
}