Question

当我尝试在ajax中编辑记录时，您好！

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

但是当我编辑记录时，它带给我的数字是DATA，但它显示的是数字，我想获得它就是值。有什么想法吗？

我的代码：

$('#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

Answer 1

如果您对使用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 AutoComplete方法：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('');
  }
});

希望有帮助。

问题编辑数据devbridge / jQuery-Autocomplete

1 个答案: