Отображение datist HTML5 при срабатывании фокусного события на входе

Как некоторые могут знать, что стиль стилизации выбирает элемент, это кошмар, буквально невозможный без какого-либо обмана javascript. Новый datalist в HTML5 может служить той же цели, поскольку пользователю представлен список опций, и значение записывается в текстовое поле ввода.

Ограничение здесь - список не появляется, пока пользователь не начнет вводить текст в текстовое поле, и даже тогда отображается только возможные совпадения на основе их ввода. Поведение, которое я хочу, состоит в том, что, как только фокусируется на поле, весь список вариантов становится видимым.

Итак, у меня есть этот код - вид на jsbin

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Input - Datalist</title>
</head>
<body>
  <input list="categories">
  <datalist id="categories">
    <option value="Breakfast">Breakfast</option>
    <option value="Brunch">Brunch</option>
    <option value="Lunch">Lunch</option>
    <option value="Dinner">Dinner</option>
    <option value="Desserts">Desserts</option>
  </datalist>
</body>
</html>

и я пытаюсь показать это с помощью этого Javascript:

    var catVal = document.getElementsByTagName("input")[0],
    cat = document.getElementById("categories");

    catVal.style.fontSize = "1.3em";

    catVal.addEventListener("focus", function(event){
     cat.style.display = "block";
    }, false);

Любая помощь будет оценена,

Приветствия

Ответ 1

Я использую следующий код:

<input name="anrede" 
    list="anrede" value="Herr" 
    onmouseover="focus();old = value;" 
    onmousedown = "value = '';" 
    onmouseup="value = old;"/>

<datalist id="anrede">
    <option value="Herr" selected></option>
    <option value="Frau"></option>
    <option value="Fraulein"></option>
</datalist>

Mouseover:
Установите фокус и запомните старое значение в - g l o b a l - variable

MouseDown:
Удалить значение и показать datalist (встроенная функциональность)

MouseUp:
Восстановить старое значение

Затем выберите новое значение.

Найдите это приемлемое обходное решение для выпадающего списка.

Ответ 2

Надеюсь, вам понравится это решение:

Я добавил атрибут "temp" в поле ввода для хранения, и как только мышь нависает над введенным вводом, он сохранит свое текущее значение в temp, а затем удалит значение, чтобы позволить открывать каталоги.

В режиме мыши вы вернете значение поля из переменной temp. Это решение отлично работает в Chromium, которое я тестировал.

<input value="Classic" list="myDatalist" temp="" onmouseover="this.temp=this.value; this.value='';" onmouseout="this.value=this.temp;"> 
  <datalist id="myDatalist" open="open"> 
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>

В качестве бонуса вы можете добавить... placeholder = "Нажмите, чтобы увидеть все ваши варианты"

Ответ 3

HTML:

<!DOCTYPE html>
<html>
<head>
   <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

   <meta charset=utf-8 />
   <title>Input - Datalist</title>
</head>
<body>

  <input list="categories" id="categories2" type="text">
  <div id="result"></div>
  <datalist id="categories">
     <option value="Breakfast">Breakfast</option>
     <option value="Brunch">Brunch</option>
     <option value="Lunch">Lunch</option>
     <option value="Dinner">Dinner</option>
     <option value="Desserts">Desserts</option>
  </datalist>
</body>
</html>

JQuery

var result='';
$(document).ready(function(){  
   $('input[type=text]').focus(function(){
      $('#categories option').each(function(){
      result=result+" "+$(this).val();
      });

      $('#result').show().html(result);
      $('input[type=text]').unbind('focus');
   });
   $('input[type=text]').blur(function(){
       $('#result').hide();  
       $('input[type=text]').focus(function(){
           $('#result').show();
       });

   });  
});

Рабочий JS файл

http://jsbin.com/urupit/4/watch