Geek Answers Handbook

HTML5 datist display on focal input event

As some may know that a styling style selects an element, this is a nightmare, literally impossible without any javascript cheating. The new datalist in HTML5 can serve the same purpose, since the user is presented with a list of options, and the value is written to the input text box.

The restriction here is that the list does not appear until the user begins to enter text in the text box, and even then only possible matches based on their input are displayed. The behavior I want is that, as soon as it focuses on the field, the entire list of options becomes visible.

So I have this code - view on 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>

and I'm trying to show this with this 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);

Any help would be appreciated

Greetings

+16
source share
3 answers

I am using 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 remember the old value in - global - variable

MouseDown:
Delete value and show datalist (built-in functionality)

MouseUp:
Restore old value

Then select a new value.

Find this acceptable workaround for the drop down list.

+6
source

Hope you enjoy this solution:

I added the "temp" attribute to the input field for storage, and as soon as the mouse hangs over the input I entered, it will save its current value in temp and then delete the value to allow directories to be opened.

In mouse mode, you will return the field value from the temp variable. This solution works fine in Chromium, which I tested.

 <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>

As a bonus, you can add ... placeholder = "Click to see all your options"

+1
source

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 file

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

-1
source

More articles:


All Articles