

お世話になっております。  
下記画像のような、inputの検索履歴の一覧表示をmonacaで実装された方いらっしゃいませんでしょうか。  
もしくはこんな方法はどう？等共有いただけると非常にありがたいです。

[![参考画像](https://i.stack.imgur.com/osFUz.png)](https://i.stack.imgur.com/osFUz.png)


CC BY-SA 3.0
2015-12-10T10:40:24.293
19854
2015-12-12T04:08:50.087
12355
question
monaca
inputの検索履歴一覧表示について


HTML5のSuggestを使用するのが一番の近道かと思います。

  1. 検索時にWebDatabase(SQLite)を使用して検索履歴を保存する。
  2. 検索フォームの初期化時にDBからデータを取得し、`datalist`タグでデータリストを作成する。
  3. `list`要素で`datalist`を指定し、HTML5の`suggest`機能を使用し検索履歴を表示する。

[code]

    //検索履歴配列
    var history_list = [];
    
    function fake_search(){
      //検索語を取得しクリア
      var sword = $("#s_words").val();
      $("#s_words").val("");
      
      //既に登録した語句でなければ追加
      if(0>$.inArray(sword, history_list)){
        //Suggestに履歴を追加
        $("#search_history").append($("<option>").val(sword));
        //単語リストに追加
        history_list.push(sword);
      }
      
      alert("擬似検索しました。\n検索履歴に語句を追加しました。");
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="search" id="s_words" name="s_words" placeholder="検索語を入力してください。" list="search_history" />
    <button onclick="fake_search();">検索</button>
    <datalist id="search_history">
    </datalist>
[/code]

※上記例は手っ取り早くするためにjQueryを使用しています。


CC BY-SA 3.0
2015-12-12T04:08:50.087
19902
2015-12-12T04:08:50.087
19854
answer