Javascript in html per pagina di supporto di un sito

[Mighel123]

Buongiorno a tutti, scrivo perché ho una domanda... vorrei creare una specie di ricerca per una pagina di supporto con dei post che riportano le principali soluzioni ai problemi. Ho inizialmente utilizzato questo codice:

<form action="controllo()" method="post"><input name="keyword" id="search_input" autocomplete="off" list="suggerimenti" placeholder="Descrivi il tuo problema"/> 
<datalist id="suggerimenti">
<option value="nome_post1"></option>
<option value="nome_post2"></option>
[...]
</datalist>
<input type="submit" value="invia">

e poi vorrei creare una function con javascript in qualche modo del tipo: (oppure diversa... non so)

function controllo() {
        if (search_input == paroladiuntitolo) ecc...
}

E quindi vi vorrei chiedere due cose:

1. Come si fa a far apparire i suggerimenti del datalist dopo la prima lettera e non quando clicchi sul input? (perché saranno tantissimi titoli dei post)
2. Come si fa a far uscire un risultato di un post con un nome all'interno del titolo uguale a cosa l'utente a scritto? (perché l'utente potrebbe non scrivere il nome intero del post)

PS io non ho un dominio ma solo file in locale e non ho quindi un server.
Qui sono i codici che ho scritto in tutto:

<table  height="30%" border="0" bgcolor="white" width="100%" style="border-radius: 5px; border: 5px solid white;">
<tr><td width="50%" align="center" colspan="2"><br/>
<div class="title"><h1>Ciao, come possiamo aiutarti?</h1></div> </td></tr>
<tr><td width="9.85%"></td>
<td height="70%">
<form id="search_form" action="#" method="post">    
<fieldset id="search_field"><center>
<table border="0" height="100%" width="100%">
<tr><td width="10%" align="center">    
<input type="image" src="immagini/lente.jpg"/></td>
<td width="2%"></td>    
<td height="100%" width="88%" align="center">    
<input name="keyword" list="suggerimenti" id="search_input" autocomplete="off" placeholder="Descrivi il tuo problema" width="100%" height="100%" style="outline:none;"/>    
<datalist id="suggerimenti">         
<option value="parola_di_un_titolo_di_un_post1"></option>        
<option value="parola_di_un_titolo_di_un_post2"></option>    
</datalist>    
</td></tr></table></center>    
</fieldset></form></td></tr></table>

L'immagine del risultato è questa: https://i.stack.imgur.com/ZPt0R.png
GRAZIE MILLE per le risposte!!!

[LeleFT]

JavaScript ha una sezione dedicata.
Sposto.


Ciao.