ionicでAjax通信を用いて検索リストを表示する

kagehal 19views 更新:2017年9月14日

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]);
   }

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません