Railsで作ったデータベースで、同姓同名のデータがある場合に、その一覧を Bootstrap の popover で表示するようにしたかった(下図のような感じ)。
姓名のフィールドに入力があった時点で、JQueryのchangeイベントを受けて、検索するアクションをたたいて、getJSONで受け取って表示すればよい。
BootstrapページのpopoverのサンプルはButtonにメッセージを設定して、クリックなどで表示させるものだが、自分で検索の都度にcontentを設定したいし、また、popoverを消すためのcloseボタンも設置したい。どうするか?
まずは、表示したい場所にdivを書く。
<div id="popoverSameNames"></div>
これに対して、popover で content を設定して、show すればよい。
popover.({options}) の中でcontentを指定することもできるが、それだと、再検索したときに表示が切り替わらないことが判明。
↓
こちらにヒントがあった
Bootstrap popover content cannot changed dynamically
書き換えるたびに以下のようにすればよいようだ。
$("#popoverSameNames").data('bs.popover').options.content = samenames_html;
また、closeボタンのつけ方は以下にあった。
How to add a close button to Bootstrap Popover
最終的に以下のようなコードにした。
↓
// getJSONで受け取った同姓同名の情報から samenames_html を作って↓
if (samenames_html.length > 0) {
$("#popoverSameNames").popover({
title: '同姓同名があります.<span class="close">×</span>',
template: '<div class="popover" role="tooltip" style="width:500px;font-size:80%;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>',
html: true
}).on('shown.bs.popover', function(e){
var popover = $(this);
$(this).parent().find('div.popover .close').on('click', function(e){
popover.popover('hide');
});
});
$("#popoverSameNames").data('bs.popover').options.content = samenames_html;
$("#popoverSameNames").popover('show');
} else {
$("#popoverSameNames").data('bs.popover').options.content = "";
$("#popoverSameNames").popover('hide');
}
これでとりあえずうまく動いている。