Проблема с редактированием данных devbridge / jQuery-Autocomplete - PullRequest
Новая
       9

Проблема с редактированием данных devbridge / jQuery-Autocomplete

0 голосов
/ 26 октября 2018

Привет, когда я пытаюсь отредактировать запись в 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 / автозаполнение

1 Ответ

0 голосов
/ 27 октября 2018

Если вы используете iCuery UI AutoComplete, то вам нужно рассмотреть следующий пример:

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

С вашим кодом это будет выглядеть примерно так: jQuery UI AutoComplete 

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, у него также есть плагин с именем 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('');
  }
});

Надеюсь, это поможет.

...