Edited at

Bootstrap4のPopover内でjQueryのAutocompleteを使う

実装時に少々詰まったので備忘録。


必要なファイルを読み込ませる


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が動かない。っぽい。