AMP автозаполнение, как получить идентификатор из результатов автозаполнения и отображать только текст на входе - PullRequest
Новая
       3

AMP автозаполнение, как получить идентификатор из результатов автозаполнения и отображать только текст на входе

0 голосов
/ 14 января 2020

просмотр экрана Я использую https://amp.dev/documentation/components/amp-autocomplete/, и я могу показать в результатах идентификатор и имя, объединенные в одну строку, но мне нужно показать только имя и сохранить идентификатор в скрытом вводе , кодовый экран 

        <amp-autocomplete filter="substring" filter-value="name" min-characters="2" src="/ajax/get_active_clinics.php" class="name_autocomplete">
        <input type="text" placeholder="Numele clinicii" name="clinic_name" id="clinic_name"
               {literal}on="change:AMP.setState({clinic_name_validation: true, form_message_validation:true})"{/literal}>
        <span class="hide"
              [class]="formResponse.clinic_name && !clinic_name_validation ? 'show input_validation_error' : 'hide'">Clinica este obligatorie</span>

        <template type="amp-mustache" id="amp-template-custom">
            {literal}
                <div class="city-item" data-value="ID - {{id}}, {{name}}">
                    <div class="autocomplete-results-item-holder">
                        <div class="autocomplete-results-item-img">
                            <amp-img src="{{link}}" alt="{{name}}" width="40" height="40"></amp-img>
                        </div>
                        <div class="autocomplete-results-item-text">{{name}}</div>
                    </div>
                </div>
            {/literal}
        </template>
    </amp-autocomplete>

1 Ответ

0 голосов
/ 17 января 2020

Вы можете использовать событие select для amp-autocomplete, чтобы получить значение event.value, которое будет возвращать значение атрибута data-value выбранного элемента.

https://amp.dev/documentation/components/amp-autocomplete/#events

Затем можно вызвать строковый метод split () для результата.

Вам потребуется изменить значение данных в шаблоне усов следующим образом: 

<div class="city-item" data-value="{{id}},{{name}}">

Затем добавьте следующий код в автозаполнение, это назначит значения разделения двум временным свойствам состояния. 

<amp-autocomplete
  ...
  on="select: AMP.setState({
    clinicName: event.value.split(',')[0],
    clinicId: event.value.split(',')[1]
  })"
>

Как только эти значения перейдут в состояние, вы сможете получить к ним доступ, используя связанные значения. Обратите внимание на атрибут [value], он обновит входные значения при изменении состояния. Стоит отметить, что изменение значения не вызовет прослушиватель событий change на вашем входе, поскольку он срабатывает только при взаимодействии с пользователем. 

<input
  type="text"
  placeholder="Numele clinicii"
  name="clinic_name"
  id="clinic_name"
  [value]="clinicName"
  on="change:AMP.setState({
      clinic_name_validation: true,
      form_message_validation:true
    })"
/>

Последнее, что вам нужно сделать, это добавить скрытый ввод для Clini c ID, опять же это нужно будет привязать к временному состоянию свойства clinicId. 

<input
  type="hidden"
  name="clinic_id"
  [value]="clinicId"
>
...