I try to automatically display all the parameters of the html5 datalist element to the user when the button is pressed, as a result of which the input element is in focus. Typically, all options are displayed when the user double-clicks on the corresponding text input item. I would like to programmatically model this behavior so that the user can see all the parameters before they start typing.
I tried to simulate clicks and double clicks, getting focus using $('#text-input').focus(); (this works) and then using jquery .click() (once and twice), .dblclick() , .trigger('click') and even using jquery.simulate.js, All this calls $('#text-input').click(function() {...}); , but actually does not affect the state of the visible input element in the browser.
Here is my 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 my code with dblclick attempt:
(function($) { $(document).ready(function() { var textInput = $('#text-input'); textInput.dblclick(function() { alert('Handler for .dblclick() called.'); }); $('#mic-button').click(function() { textInput.focus();
source share