select2

designlink.work


よく、検索フォーム付きのプルダウンselect2というのが使われているけれど、
JQueryといっしょにCDNなりなんなりから読み込むと、簡単に使える。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Hello, World!</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.min.css" rel="stylesheet" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>
</head>
<body>
    <select class="select2">
    <option>abcdefg</option>
    <option>hijklmn</option>
    <option>1234567</option>
    </select>
</body>
<script>
$('.select2').select2({
  width:"300px",
  placeholder: "選択してください", //プレースフォルダ
  allowClear: true
})
.on('change',function(){
})
</script>
</html>

f:id:Kow:20181216093304j:plain
検索フォームでプルダウンの内容を絞り込んでくれる。膨大な選択肢になるようなプルダウンを使いやすくしてくれるらしい。