Getting ready

Create a blank HTML document named recipe-7.html, and have it open and ready for editing.

How to do it…

How it works…

Our aim is to enable the search button once there has been some text inputted into the search input by the user. To do this, we need to attach a .keyup() event handler to the search input. This will allow us to execute some code while the user is inputting some text. By providing a function as an argument to the keyup() function, we can then check the inputted data. If the input data has a length of two or more characters (as a search less than three characters would be a little ambiguous), we can enable the search button.

Using the following JavaScript, we are able to listen for data input, check the input length, and depending on this, enable or disable the search button:

$(function(){
$('#search-input').keyup(function(){
   if ($(this).val().length > 2) {
      $('#search-btn').prop("disabled", false);
   } else {
   $('#search-btn').prop("disabled", true);
   }
});
});

First of all, we attach the keyup event to the search input using $('#search-input').keyup();, referencing its ID. Then, within the callback function, we are able to check the length of the currently inputted text using $(this), which refers to the element to which we have attached the keyup event. The val() function then gets the inputted text, and we can use the length property to find its length. Using an if/else statement, we can decide if the search button needs to be enabled or disabled.

To enable or disable the search button, we use jQuery's prop() function and set the disabled property to either true or false.

See also