http://ionicframework.com/docs/components/#searchbar よりいわゆる”iPhoneらしい”表示ができる様々なコードを検索することができます。その中から検索バーおよび検索リストを表示させます。大まかなコードは上記のサイトのSearchbarから参考にしてください。
特に検索リストをAjax通信でWordPressのDBから持ってくる場合、tsファイル内で
initializeItems() { var point; var name; //グローバル変数 var wp_url_admin_ajax = "wpの参照ファイル"; $.ajax({ url: wp_url_admin_ajax, crossDomain:true, type:"POST", async:false, //同期通信に設定 dataType:"text", data:{ action:"tell_me" }, success:function(response){ var json = eval("(" + response + ")"); point=JSON.parse(response); name=new Array(); var count=0; for(var i=0;i<point.length;i++){ name[count]=point[i].name; count++; } //result=name.join('","'); //} } });
のように非同期通信をオフにし、Ajax通信外で使う変数をグローバル変数にしなければなりません。これは非同期通信でレスポンスが返る前に次の処理に進んでしまうためです(http://qiita.com/katsukii/items/bd64efcf4f070d77c028 のサイトを参考にしました)。あまり同期通信にすることは推奨されませんが、test.doneを用いる方法ではなぜかエラーが出てしまいました。tsファイルだからでしょうか? また、得た配列は下記のように少し工夫して書かないと配列の要素すべてが一つの単語として認識されてしまいます。
this.items = []; for(var j=0;j<name.length;j++){ this.items.push(name[j]); }