実装時に少々詰まったので備忘録。
必要なファイルを読み込ませる
index.html
<head>
<meta charset="utf-8">
<title>sample</title>
<link rel="stylesheet" href="jquery-ui.min.css"></script>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script type="text/javascript" src="popper.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
popoverを作成
index.html
<body>
<button type="button" class="btn btn-success" data-container="body" data-toggle="popover" data-placement="right" data-content="<p>プログラミング言語：</p><input type='text' id='language' name='name' style='width:200px;'>">ボタン</button>
</body>
script.js
$('[data-toggle="popover"]').popover({
html: true, // true:内容にHTMLタグ使用可
container: 'body', //表示領域の大型化
template:'<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-body"></div></div>'
})
autocompleteを実装
script.js
$(function () {
var progLang = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$('[data-toggle="popover"]').popover({
html: true, // true:内容にHTMLタグ使用可
container: 'body', //表示領域の大型化
template:'<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-body"></div></div>'
}).on('shown.bs.popover', function(){
// autocmplete
$(document).on('keydown', function(e){
$('#language').autocomplete({
source: progLang, // 入力候補リスト
autoFocus: true,
delay: 500,
minLength: 1
});
});
});
});
##まとめ
popover内のテキストボックスは動的に生成されるものなので、
$(document).on(・・・ でないとjavascriptが動かない。っぽい。