Как передать данные обломок Materialise / jQuery на скрытый ввод формы? - PullRequest
0 голосов
/ 13 марта 2020

Я настроил материализацию для создания чипа автозаполнения. Пользователь может ввести в поле ввода (на самом деле div) и материализовать с отображением результатов сопоставления. При выборе этот результат становится чипом. Это взаимодействие является частью более крупной формы, которая будет отправлена. То, что я пытаюсь сделать, это передать данные чипа в скрытый вход на странице в виде списка. Я видел это в других местах, но кажется, что есть решения, которые используют jQuery и Materialise 0,9 или нет jQuery и Materialize 1.0. Я застрял между ними. Я использую jQuery для инициализации чипа автозаполнения, но использую последнюю версию (1.0) Materialise. Вот jsfiddle того, что я пытаюсь сделать: https://jsfiddle.net/kfox0erb/

Код jQuery, который я пытаюсь отладить, выглядит следующим образом (обратите внимание, что это был чужой код, который работал с более ранней версией Materialize, так что я пытался заставить его работать с текущей версией.

  function updateChipInput(chip) {
    var newval = $(chip).chip('data')
      .reduce(function(result, val) {
        result.push(val.tag);
        return result;
      }, []).join(",")
    $('input[name="hiddenchip"]').val(newval);
  }

  $(document).ready(function() {
    var data = $('input[name="hiddenchip"]').val().split(',')
      .map(function(tag) {
        return {
          tag: tag
        }
      })

    $('.chips').chips();
    $('.chips-autocomplete').chips({
      autocompleteOptions: {
        data: {
          'Apple': null,
          'Microsoft': null,
          'Google': null
        },
        limit: 5,
        minLength: 1
      },
      onChipAdd: function(e, chip) {
        updateChipInput(this);
      },
      onChipDelete: function(e, chip) {
        updateChipInput(this);
      }
    });
  });

И HTML

<form>
  <div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <div name="chip_select" class="chips chips-autocomplete"></div>
          <label for="autocomplete-input">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>
  <input name="hiddenchip" type="hidden" value="0">
</form>

Спасибо за вашу помощь!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...