编辑数据devbridge/jquery自动完成时出现问题

您好,当我试图用ajax编辑记录时,一个问候语出现了

 {"suggestions": [{"value": "Pendiente","data": 1},{"value": "Programar","data": 2},}

但当我编辑记录时,它给我带来了数字,我指的是数据,但它给我显示了数字,我想得到的是数值。有什么想法吗?

我的代码:

$('#eestado').val(estatus); // example estatus = 1
$('#eestado').autocomplete({
    serviceUrl: '{{ url('/getestados/') }}',
    onSelect: function (suggestion) {
        $('#eestado').val(suggestion.data);
    },
    formatResult: function(suggestion, currentValue){
        if (suggestion.data === null) {
            return "Create a new tag";
        }

        return suggestion.value;
    },
    onInvalidateSelection: function() {
        $('#eestado').val('');
    }
});

我用插头 Jquery/autocomplete

如果您对使用jquery ui autocomplete感兴趣,则需要查看以下示例:

http://jqueryui.com/autocomplete/#multiple-remote

用你的代码,它会像这样,用 jquery ui自动完成

var estatus = 1;
var exampleData = {
  "suggestions": [{
    "value": "Pendiente",
    "data": 1
  }, {
    "value": "Programar",
    "data": 2
  }]
};
$(function() {
  function split(val) {
    return val.split(/,\s*/);
  }

  function extractLast(term) {
    return split(term).pop();
  }

  $('#eestado').val(estatus); // example estatus = 1
  $('#eestado').on("keydown", function(event) {
    if (event.keyCode === $.ui.keyCode.TAB &&
      $(this).autocomplete("instance").menu.active) {
      event.preventDefault();
    }
  }).autocomplete({
    source: function(req, resp) {
      var url = "{{ url('/getestados/') }}";
      var results = [];
      $.get(url, {
        q: extractLast(req.term)
      }, function(data) {
        $.each(data.suggestions, function(k, v) {
          results.push({
            label: v.value,
            value: v.data
          });
        });
      });
      resp(results);
    },
    focus: function() {
      // prevent value inserted on focus
      return false;
    },
    select: function(event, ui) {
      var terms = split(this.value);
      terms.pop();
      terms.push(ui.item.value);
      terms.push("");
      this.value = terms.join(", ");
      return false;
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input id="eestado" type="text" />

对于jquery自动完成

在您的评论中,您提到您正在使用另一种jquery自动完成方法: https://www.devbridge.com/sourcery/components/jquery-autocomplete/

他们说:

已知问题

如果将它与jquery ui库一起使用,它还有一个名为autocomplete的插件。在这种情况下,可以使用插件别名devbridgeautocomplete:

$('.autocomplete').devbridgeAutocomplete({ ... });

所以,如果你同时包含了这两个库,请注意。对于您的代码,我只更改一个元素:

onSelect: function (suggestion) {
  $('#eestado').val(suggestion.value);
}

当用户进行选择时, value 将出现在输入中,而不是 data .

完整代码:

$('#eestado').autocomplete({
  serviceUrl: '{{ url('/getestados/') }}',
  onSelect: function (suggestion) {
    $('#eestado').val(suggestion.value);
  },
  formatResult: function(suggestion, currentValue){
    if (suggestion.data === null) {
      return "Create a new tag";
    }
    return suggestion.value;
  },
  onInvalidateSelection: function() {
    $('#eestado').val('');
  }
});

希望能有所帮助。