Hello. I try to make an input field by typing in which the first letters pop up a list with prompts from an existing array of words. And if the entered word is in the array, the submit button becomes active and you can submit the form. This has already been implemented (by common efforts) - https://jsfiddle.net/f67v76mb/

$("#tags").keyup(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC" ]; if(availableTags.indexOf($(this).val()) == -1 ) { $('input[type="submit"]').prop('disabled', true); } else { $('input[type="submit"]').prop('disabled', false); } $("#tags").autocomplete({ source: availableTags }); });

But in this solution, if you select a word from the pop-up list, the button does not become active, you must enter the entire word + it is case sensitive.

I would be very grateful for any useful information. I rarely work with ajax, js ...

    1 answer 1

    That's right, you have to check the entry of an element into an array by the keyup event - entering text in the field, for the value selection event in the menu, you shouldn't have anything now.

    In jquery UI Autocomplete there is a close event that will work when you close the menu with prompts (when we select any item - the menu closes) - you can check for the presence of an element in the array using it.

    On the second question - everything is also correct indexOf , as well as in general, js is case sensitive. Accordingly, you can create another array in which all elements are converted to upper case using the toUpperCase function and, when entering or selecting a value, compare the value of the field with the elements of the new array, also translating it (the field value) to upper case

     var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC" ]; var availableTagsUpperCase = availableTags.map(function(value) { return value.toUpperCase(); }); function checkTags(){ if(availableTagsUpperCase.indexOf($("#tags").val().toUpperCase()) == -1 ){ $('input[type="submit"]').prop('disabled', true); }else{ $('input[type="submit"]').prop('disabled', false); } } $("#tags").keyup(function(){ checkTags(); }); $( "#tags" ).autocomplete({ source: availableTags, close: function() { checkTags(); } }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <input type="text" name="tags" id="tags" /> <input type="submit" value="submit" disabled />