TOP

IE9でhtml5のdatalistぽい事をする

2017-07-05 11:48:35

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

通常:datalist対応ブラウザ

<!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非対応ブラウザ

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

<!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>

サンプル