Настроить html datalist dropdown

Question

Я хочу настроить способ отображения даталиста. У меня есть следующий DataList прямо сейчас

<input type="text" id="employee" list="employee"> 
<datalist id="employee"> 
    <option value="John Doe">John Doe (ID: 1)</option> 
    <option value="Jane Doe">Jane Doe (ID: 2)</option> 
    <option value="John Jane">John Jane (ID: 3)</option> 
</datalist> 

Когда я печатаю на поле ввода, я вижу выход, как этот

Но мое требование, чтобы заставить это выглядеть, как показано ниже и

Когда выбрано раскрывающееся меню, следует выбрать только имя (без идентификатора). Что-то вроде этого:

Как я могу это сделать? В основном я хочу показать более подробную информацию в раскрывающемся списке, но выберите только имя, а не идентификатор для отправки формы. Кроме того, я не хочу, чтобы в раскрывающемся списке были две колонки (темнее и светлее). Я просто хочу, чтобы ценность была больше информации.

Вот JSFiddle, который я использовал для этого вопроса.

P.S. - Я динамически генерирую этот динамит из Ajax Call на основе пользовательского ввода в текстовом поле. Кроме того, я не могу использовать jquery для управления чем-либо. Он должен быть встроенным javascript.

Answer 1

Второй столбец появляется, потому что вы помещаете контент между тегами открытия и закрытия. Изменение:

<option value="John Doe">John Doe (ID: 1)</option> 

к:

<option value="John Doe"></option> 

удалить вторую колонку.

Это может быть сделано на прием данных через вызов AJAX, просто создайте параметр в JavaScript:

var option = document.createElement("option"); 
option.value = name + " (ID: " + id + ")"; 
document.getElementById("my-datalist").appendChild(option); 

Приведенный выше код будет сделать один столбец, однако, содержит идентификатор в поле значения , Вам нужно будет удалить это перед отправкой, если вы не хотите, чтобы он был отправлен с формой. Или вы можете иметь два столбца для имени (атрибут value) и один для идентификатора (текстовое содержимое).

Для получения более подробной информации, обратитесь к этим link.