JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<input id='search'/>
<button id='submit'>Submit</button>

CSS

.ui-autocomplete{
    font:8pt Arial, sans-serif;
}

JavaScript

var submit = false;
var lastVal = $('#search').val();
$('#search').autocomplete({
    source: ['asp', 'jsp', 'javascript', 'php', 'python', 'ruby', 'mysql'],
    minLength: 1,
    autoFocus: true,
    delay: 100,
    select:function(e, ui){
        submit = true;
    }
}).on('keydown', function(){
    if(lastVal != $(this).val()){
        submit = false;
    }
    lastVal == $(this).val();
}).on('blur', function(){
    if(!submit){
        $(this).val('').attr('placeholder','try again - choose from the list');
    }
});;

$('#submit').on('click', function(e){
    if(submit){
        alert('submitting');
    }
    else{
        alert('cannot submit, please choose an autocomplete option');
        e.preventDefault();
    }
});