jquery - HTML5 datalist - simulate a click event to expose all options -
i trying automatically show options of datalist html5 element user when button clicked bringing input element focus. normally, options shown when user clicks on associated text input element twice. programmatically simulate behavior user can see options before start typing.
i have tried simulating clicks , double clicks getting focus using $('#text-input').focus(); (this works) , using jquery .click() (once , twice), .dblclick(), .trigger('click') , using jquery.simulate.js. of these trigger $('#text-input').click(function() {...}); not affect state of visible input element in browser.
here html:
<!doctype html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript" src="test.js"></script> </head> <body> <div id="main"> <form> <datalist id="categories"> <option value="travel"> <option value ="work"> <option value="literature"> <option value="teaching"> </datalist> <input type="text" list="categories" id="text-input"> <button type="button" id="mic-button"> </button> </form> </div> </body> </html> and code dblclick attempt:
(function($) { $(document).ready(function() { var textinput = $('#text-input'); textinput.dblclick(function() { alert('handler .dblclick() called.'); }); $('#mic-button').click(function() { textinput.focus(); // list options tricking datalist // think user double clicked on textinput.dblclick(); }); })(jquery);
this feature not defined in spec, nice be.
see following issue, touches on same problem you're describing: programmatically make datalist of input[type=url] appear javascript
Comments
Post a Comment