Hello. There is input, when entering text into which, displays hints from an already existing array of words.

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC" ]; $( "#tags" ).autocomplete({ source: availableTags }); } ); </script> </head> <body> <div class="ui-widget"> <form action="a.php" method="post" /> <label for="tags">Tags: </label> <input id="tags" name="text"> <input type="submit"> </form> </div> </body> </html>

Question: How to make that if the user entered a word in the field that is not in the array with words, it was impossible to submit the form, and the submit button was not visible, or was replaced with text?

I would be very grateful for the help.

  • Have you ever tried to solve the problem then? Where is your handler for clicking Submit button or text input event in the field, followed by checking the entered text by array? - teran
  • @teran in js I'm not strong. so I ask for help) of any useful information that will push me to solve the problem - iKey

1 answer 1

You can make the submit button inactive like this:

 $("#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); } });

You can block the form submission as follows:

 $('form').submit(function(e) { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC" ]; if(availableTags.indexOf($("#tags").val()) == -1 ) { $('input[type="submit"]').prop('disabled', true); } });

If you wish, you can make the check itself case-insensitive, put it into a separate function and add onchange event onchange .

  • the button is not active, but when you enter a value that is in the array - it does not become active - iKey
  • @Denis , very much getting jsfiddle.net/en7k5n2k - Pyramidhead
  • Is it possible to somehow ignore the case of letters? - iKey
  • And yet, in the function was autocomplete . I added it to your code, but when you select it from the list, the button does not become active. Only if you enter the full word - iKey
  • It should not become active when choosing from the list. For this, I wrote in the answer that you can add an onchange event onchange . The register-independent verification function can also be done. For example, iterate over elements in an array in a loop and compare it with the entered value, resulting in both cases in lower case. - Pyramidhead