thgreasi/datalist-polyfillで公開されているライブラリを使用しました

通常：datalist対応ブラウザ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input type="text" name="color" id="color" value="" list="colorlist" />
<datalist id="colorlist">
        <option value="Black" />
        <option value="Blue" />
        <option value="Dark Green" />
        <option value="Grey" />
        <option value="Green" />
        <option value="Red" />
        <option value="White" />
        <option value="Yellow" />
        <option value="梅田" />
        <option value="ヨドバシ梅田" />
        <option value="梅干し" />
</datalist>
</body>
</html>

IE9：datalist非対応ブラウザ

  • datalistタグの中のoptionをselectで囲む
  • 各ライブラリを読み込む

という2つの変更を加えます

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css" />     <!-- ←追記 -->
</head>
<body>

<input type="text" name="color" id="color" value="" list="colorlist" />
<datalist id="colorlist">
<!--[if IE 9]><select style="display:none"><![endif]-->     <!-- ←追記 -->
        <option value="Black" />
        <option value="Blue" />
        <option value="Dark Green" />
        <option value="Grey" />
        <option value="Green" />
        <option value="Red" />
        <option value="White" />
        <option value="Yellow" />
        <option value="梅田" />
        <option value="ヨドバシ梅田" />
        <option value="梅干し" />
<!--[if IE 9]></select><![endif]-->     <!-- ←追記 -->
</datalist>

<!-- 追記:ここから -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="DatalistPolyfill.standalone.js"></script>
<!-- 追記:ここまで -->

</body>
</html>

サンプル