JSFiddle - React, Tailwind, and code Playground

by alexkey

HTML

<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">

JavaScript

var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
$( "#autocomplete" ).autocomplete({
  source: function( request, response ) {
          var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
          response( $.grep( tags, function( item ){
              return matcher.test( item );
          }) );
      }
});



var keyEvent = $.Event("keydown");          
keyEvent.keyCode = $.ui.keyCode.DOWN;  // event for pressing "down" key

$("#autocomplete").val("j");        // Enters the value "j" in text field

$("#autocomplete").trigger(keyEvent);  // Press "down" key to select first item
$("#autocomplete").trigger(keyEvent);  // for some reason you need to call it twice, perhaps something is happening in the background, meaning the keydown isn't 

keyEvent.keyCode = $.ui.keyCode.ENTER; // event for pressing the "enter" key

$("#autocomplete").trigger(keyEvent);  // Press "Enter" to select marked item


//j is typed in but "java" should be selected.