今回の開発案件ではPrimeFacesのAutoCompleteコンポーネントを利用しています。
手軽にサクッと使えて便利なのと、Java 8使っていればStream APIでのフィルタも簡単にできて良い感じです。
例えば次のような管理Beanを作って
@Named(value = "autoCompleteBean")
@ViewScoped
public class AutoCompleteBean implements Serializable{
@Getter @Setter
private String selectedMember;
public List<String> listNogizaka(String input){
return Arrays.asList("MaiShiraishi", "NanaseNishino" ,"RinaIkoma",
"MaiHukagawa", "NanamiHashimoto","ErikaIkuta");
}
}
ビューでは、autoCompleteのcompleteMethod属性に対して、表示するリストを返すメソッドをバインドします。value属性には選択した値を格納する変数を指定します。
listNogizakaメソッドの引数inputには入力された文字列が都度入ってきます。
<h:body>
<h:form prependId="false">
<p:autoComplete
value="#{autoCompleteBean.selectedMember}"
completeMethod="#{autoCompleteBean.listNogizaka}" />
</h:form>
</h:body>
実行して、テキストに文字を入力すると次のように該当部分がボールドで表示されたリストがでます。
該当するリストだけ出したい場合などはフィルタ処理を入れるだけ。
public List<String> listNogizaka(String input){
return Arrays.asList("MaiShiraishi", "NanaseNishino" ,"RinaIkoma",
"MaiHukagawa", "NanamiHashimoto")
.stream()
.filter(m -> m.contains(input))
.collect(Collectors.toList());
}
Stream APIの練習にもいいですね。
forceSelection属性
候補リストからしか選択できない（リストにない文字列を入力しても無効化される）ようにしたい場合はforceSelectionをtrueにします。
<p:autoComplete forceSelection="true" ...
dropdown属性
何も入力していないときに、全ての項目を出したい場合などにはdropdown属性をtrueにすれば次のようにボタンがついて、クリックすると全ての選択肢が表示されます。
cache属性
クライアント側で入力文字と結果のキャッシュもできるらしく、cache属性をtrueにすればいいようです。
cacheTimeout属性もあって、どれくらい保持するかも調整できるとのこと。
選択の反映
ビューにラベルを追加して、選択された項目を表示してみます。
<h:form prependId="false">
<p:autoComplete
value="#{autoCompleteBean.selectedMember}"
completeMethod="#{autoCompleteBean.listNogizaka}">
<p:ajax event="itemSelect" update="txtMember" />
</p:autoComplete>
<p:separator />
<h:outputText id="txtMember" value="選ばれたメンバは#{autoCompleteBean.selectedMember}" />
</h:form>
初期表示です。
文字入力して、選択肢を選びます。
選択結果が反映されます。
ビューにあるajaxイベントが味噌で、これで選択時にサーバサイドへselectedMemberがセットされます。
<p:ajax event="itemSelect" update="txtMember" />
属性は他にもあって、基本的にはPrimeFacesのDocumentにちゃんと書いてあるので読んでみてください。
追記：注意書き
@shinsukeodaさんからコメント頂きました(^^;
今回の開発では選択候補が英数字のみのコードみたいなモノだったので、ちゃんと検証してませんでした。
上記サンプルで日本語を入れたレベルであれば普通に動きましたが、、、
色々属性と絡めると駄目かもしれないので、注意が必要そうです。
PrimeFacesのようなJSFライブラリは、すごく便利な反面、ハマるとホント辛いときがあります。
Showcaseだけみて「おー、これ良さげ、採用」と上流工程で決め打ちされると、実際に使うときに「それできない…」みたいなこともありえます（実際何度か経験してます…）
なので、あまり普段利用していないコンポーネントの採用時には、しっかり検証することが大事かなと。
検証せずに採用を決めてしまうのは、実装する立場のことを考えていない人ではないかなと(^^;
