質問: お世話になっております。 下記画像のような、inputの検索履歴の一覧表示をmonacaで実装された方いらっしゃいませんでしょうか。 もしくはこんな方法はどう?等共有いただけると非常にありがたいです。 ![参考画像](https://i.stack.imgur.com/osFUz.png)
回答: HTML5のSuggestを使用するのが一番の近道かと思います。 1. 検索時にWebDatabase(SQLite)を使用して検索履歴を保存する。 2. 検索フォームの初期化時にDBからデータを取得し、`datalist`タグでデータリストを作成する。 3. `list`要素で`datalist`を指定し、HTML5の`suggest`機能を使用し検索履歴を表示する。 ``` //検索履歴配列 var history_list = []; function fake_search(){ //検索語を取得しクリア var sword = $("#s_words").val(); $("#s_words").val(""); //既に登録した語句でなければ追加 if(0>$.inArray(sword, history_list)){ //Suggestに履歴を追加 $("#search_history").append($("").val(sword)); //単語リストに追加 history_list.push(sword); } alert("擬似検索しました。\n検索履歴に語句を追加しました。"); } ``` ``` 検索 ``` ※上記例は手っ取り早くするためにjQueryを使用しています。