2017-02-07 4 views
0

Допустим, у меня есть вход список с DataList так:Input не DataList работает в динамически добавленный элемент

`<input type="text" name="color" id="color" value="" list="colorlist" /> 
    <datalist id="colorlist"> 
     <select style="display: none;"> 
      <option value="Black" /> 
      <option value="Blue" /> 
      <option value="Dark Green" /> 
      <option value="Grey" /> 
      <option value="Green" /> 
      <option value="Red" /> 
      <option value="White" /> 
      <option value="Yellow" /> 
     </select> 
    </datalist>` 

Если список, как это будет загружен как часть большего HTML структуры, я получаю через AJAX, это DataList не работает. Нет списка автозаполнения. В любых других случаях, если это загрузка по умолчанию (поэтому без какого-либо запроса AJAX) все работает нормально. Я на 100% уверен, что каждый атрибут имеет правильное имя.

Что мне не хватает?

+0

Можете ли вы дать больше информации? Как вы обрабатываете ответ от AJAX? Можете ли вы создать плункер или jsfiddle – Vikash

+0

Я бы предположил, что это связано с тем, что события, связанные с вашим автозаполнением, связаны при загрузке страницы. Таким образом, вам нужно будет либо реплицировать этот код при загрузке из ajax, либо посмотреть на [событие делегирование] (https://davidwalsh.name/event-delegate). –

+0

@Vikash https://jsfiddle.net/vn6emshs/1/ это пример моего ввода с datalist, я скопировал его из своего кода (где он не работает), но каким-то образом он работал на jsfiddle, странно ... – TomTom

ответ

0

Неверный элемент datalist. Удалите «select». В jsfiddle, который вы указали в своем комментарии, у вас нет выбора.

Так точно должно работать так:

<input type="text" name="color" id="color" value="" list="colorlist" /> <datalist id="colorlist"> <option value="Black" /> <option value="Blue" /> <option value="Dark Green" /> <option value="Grey" /> <option value="Green" /> <option value="Red" /> <option value="White" /> <option value="Yellow" /> </datalist>

Смежные вопросы