---
# System prepended metadata

title: HTML Autocomplete and Suggestions Without Javascript

---

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

