# HTML Autocomplete and Suggestions Without Javascript 有時候我們會希望輸入框可以自動偵測到關鍵詞並跳出提示，在以前都會使用Javascript來處理，當keydown的時候去匹配有無相符的文字，而現在已經有相對應的HTML標籤可以來做使用，而且非常簡單。 ## input text type 只要先定義一個datalist標籤並且給予id，之後在input內使用list屬性將datalist的id填上，即可達到以下圖片的效果。 ```htmlembedded= <!DOCTYPE html> <html lang="en"> <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" /> <title>Autocomplete and Suggestions Without Javascript</title> </head> <body> <form> <label for="search-book">Search Book</label> <input type="text" placeholder="spongebob" list="book-list" /> <datalist id="book-list"> <option value="nightmare before christmas"></option> <option value="spongebob"></option> </datalist> </form> </body> </html> ``` ![](https://i.imgur.com/XslPhjs.png) ## input range type datalist不止能夠應用在type為text的時候，在range的時候也有效果，讓我們來看看在range加上list的話會怎麼呈現。 ```htmlembedded= <!DOCTYPE html> <html lang="en"> <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" /> <title>Autocomplete and Suggestions Without Javascript</title> </head> <body> <form> <label>1 ~ 100</label> <input type="range" min="0" max="100" list="range-scale" /> <datalist id="range-scale"> <option value="0">0</option> <option value="20">20</option> <option value="40">40</option> <option value="60">60</option> <option value="80">80</option> <option value="100">100</option> </datalist> </form> </body> </html> ``` 可以看到效果如下圖，每20刻度就會有一個界線。 ![](https://i.imgur.com/LRQNsZ5.png)