tag-it autocomplete - 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。如果它在你的頁面中不起作用，那麼也許這是一個CSS問題，如果它確實起作用，那麼你的問題可能是一個XHR問題，或者響應的格式不是你所期望的。