jQuery-UI自动完成数据未显示

Question

jQuery:

function search($id, $column) {
  $("#" + $id).autocomplete({
    source: function(request, response) {
      jQuery.post("<?php echo base_url().'index.php/Auto_complete/item_search'?>", {
        Query: request.term,
        column: $column
      }, function(data) {
        response(data);
      });
    }
  });
}

HTML:

<input type="text" class="form-control English_name" id="English_name" name="English_name" placeholder="Enter Item Name (English)" onchange="product_name()" onkeyup="search('English_name', 'English_name')" autocomplete="off">

AJAX Output:

["Styler King 6 Card Holder  (Set of 1, Khaki)","ds 18 sticker","famous sticker","wx sticker","lk small sticker","LX Sticker"]

Anyone can please help me why data is not showing and How can I display data in jQuery UI autocomplete?

Answer 1

It's not clear what you're trying to accomplish with your code.

Here is an example that you may find helpful:

https://jsfiddle.net/Twisty/t1ruyg11/

JavaScript

var myData = [
  "Styler King 6 Card Holder  (Set of 1, Khaki)",
  "ds 18 sticker",
  "famous sticker",
  "wx sticker",
  "lk small sticker",
  "LX Sticker"
];

$(function() {
  $("#English_name").autocomplete({
    source: function(req, resp) {
      $.post("/echo/json/", {
        json: JSON.stringify(myData)
      }, function(data) {
        resp($.ui.autocomplete.filter(data, req.term));
      });
    }
  });
});

Now, considering your code, you may want to try something like the following:

function search(t, c){
  var url = "<?php echo base_url().'index.php/Auto_complete/item_search'; ?>";
  var query = {
    Query: t.trim(),
    column: c
  };
  $.post(url, query, function(results){
    if(results.length){
      return results;
    } else {
      return [];
    }
  });
}

$(function(){
  $("#English_name").autocomplete({
    source: function(request, response){
      response(search(request.term), $column);
    }
  });
});