Making HTML5 datalist visible when focus event fires on input

前端未结

关注

 4  1137

As some might know already styling select element is a nightmare, literally impossible without some javascript trickery. The new datalist in HTML5 could serve the same purpose s

相关标签:

4条回答

温柔的废话

2021-02-04 00:41
I use the following code:
```
<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:
Set focus and memorize old value in a -- g l o b a l -- variable

mousedown:
Delete value and show datalist (built in functionality)

mouseup:
Restore old value

Then select new value.

Find this an acceptable workaround towards a combobox.
0 讨论(0)
发布评论:

提交评论
- 加载中...
刺人心

2021-02-04 00:48
Question is pretty old, but it's top search on google and there are no answers to be found so I'll add it here.

To expand datalist on first click you need to set
```
dataListElement.style.display = "block";
```
and immediately hide it in next line, so it does not appear as element in your DOM, but it will only expand it under input element.
```
dataListElement.style.display = "none";
```
As of today it's not expanded on first click only in Firefox.
0 讨论(0)
发布评论:

提交评论
- 加载中...
失恋的感觉

2021-02-04 00:50
I hope you like this solution:

I added a “temp” attribute to the input field for storage and once the mouse hovers over the input filed it will save its current value in temp and then delete the value so as to allow the datalist to open.

On mouseout it will restore the field’s value from the variable temp. This solution works great under Chromium that I tested.

As a bonus you can add a placeholder="Click to see all your options"
```
<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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

鱼传尺愫

2021-02-04 00:53

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();
       });

   });  
});

Working JS bin

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

0 讨论(0)