HTML5 데이터리스트 - 클릭 이벤트를 시뮬레이트하여 모든 옵션을 표시합니다.

버튼을 클릭하여 입력 요소를 포커스로 가져 가면 데이터 목록 html5 요소의 모든 옵션을 사용자에게 자동으로 표시하려고합니다. 일반적으로 사용자가 연관된 텍스트 입력 요소를 두 번 클릭하면 모든 옵션이 표시됩니다. 사용자가 입력하기 전에 모든 옵션을 볼 수 있도록이 동작을 프로그래밍 방식으로 시뮬레이트하고 싶습니다.HTML5 데이터리스트 - 클릭 이벤트를 시뮬레이트하여 모든 옵션을 표시합니다.

내가 $('#text-input').focus();를 사용하여 초점을 받고 (이 작품) 다음 JQuery와 .click() (한 번 두 번), .dblclick(), .trigger('click')을 사용하고 심지어 jquery.simulate.js를 사용하여 클릭과 더블 클릭을 시뮬레이션 노력했다. 이들 모두는 $('#text-input').click(function() {...});을 트리거하지만 실제로 브라우저에서 보이는 입력 요소의 상태에는 영향을주지 않습니다.

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

그리고 dblclick 시도 내 코드 :이 될 좋은만큼

(function($) { 

$(document).ready(function() { 
    var textInput = $('#text-input'); 

    textInput.dblclick(function() { 
     alert('Handler for .dblclick() called.'); 
    }); 

    $('#mic-button').click(function() { 
     textInput.focus(); 
     // list all the options by tricking the datalist 
     // to think the user double clicked on it 
     textInput.dblclick(); 
    }); 
})(jQuery);

출처

2013-07-11 user2570550

가능한 중복 ://stackoverflow.com/questions/16133661/programmatically-make-datalist-of-inputtype-url-appear-with-javascript) – SobiborTreblinka

중복 된 http://stackoverflow.com/q/14381217/453605 –