タグ - それはオートコンプリート - codeigniter

Question

私はなぜそれは私のオートコンプリート機能が動作していない、私のコントローラ内にある私のデータベースからデータを取得したいと私は結果を与えていない質問したいと思います。ここにコードがあります。

JS

$(document).on('show.bs.modal', '#searchmusic', function() { 
$('#searchtags').tagit({ 
    allowSpaces: true, 
    placeholderText: 'Search Tags', 
    autocomplete: ({ 
     source: function(request, response) { 
      $.ajax({ 
       url: base_url + '/songtags/search_tags', 
       type: "GET", 
       success: function(data) { 
        var songtagdata = JSON.parse(data); 
        response($.map(songtagdata, function(key, value) { 
         return { 
          label: value.tag_name, 
          value: value.tag_name 
         } 
         console.log(songtagdata); 
        })); 
       }, 
       error: function(request, status, error) { 
        alert(error); 
       } 
      }) 
     }, 
     minLength: 2 
    }) 
}); 
}); 

コントローラ

public function search_tags(){ 
    $song_tags = $this->song_tags_model->get_tags(); 
    $encode = json_encode($song_tags); 
    echo $encode; 
    } 

Answer 1

あなただけの固定オブジェクトにデータを設定し、次のコード例を試すことができます：

$(document).ready(function() { 
 
    $("#suggest").autocomplete({ 
 
     delay: 100, 
 
     source: function (request, response) { 
 
      Promise.resolve(
 
       [1,2,3,4,5,6] 
 
      ) 
 
      .then(function(data){ 
 
       console.log(
 
        "got data:" 
 
        ,JSON.stringify(
 
        data, 
 
        undefined, 
 
        2 
 
       ) 
 
       ) 
 
       response(data); 
 
      }); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script> 
 
<input type="text" placeholder="type something ..." id="suggest" />

もしajaxバージョンでは動作しないのであれば問題は要求の要求またはフォーマットにありますので、コンソールの出力で答えを更新する必要があります。

あなたが例を理解していなかったが、ここにあなたのコードに適用した例である、それはAJAXを使用しますが、ちょうどあなたがあなたのAjaxがあることを期待している内容に応じて値を設定しません：

$(document).ready(function() { 
    $("#suggest").autocomplete({ 
     delay: 100, 
     source: function (request, response) { 
      Promise.resolve(
       `[{"tag_name":"helo"},{"tag_name":"world"}]` 
      ) 
      .then(function(data){ 
       console.log(
        "got data:" 
        ,data 
       ) 
       response(
        JSON.parse(data) 
        .map(
        item => ({ 
         label:item.tag_name 
         ,value:item.tag_name 
        }) 
       ) 
       ); 
      }); 
     } 
    }); 
}); 

作業例はhereです。あなたのページでうまく動作しない場合は、おそらくそれは動作している場合、あなたの問題はおそらくxhrの問題または応答の形式はあなたが期待したものではない、それはCSSの問題です。