Disable jQuery UI Autocomplete

Here is a short & crisp tutorial on how to disable jQuery UI Autocomplete.

This article assumes that you already know how to implement jQuery UI Autocomplete.

So we are jumping to the coding part…

The HTML Code of Autocomplete Text Box may look like this:

<input id="autocomplete" type="text" name="autocomplete" />

And you will be invoking the jQuery UI Autocomplete (and passing options) like:

source: "autosuggest.php",
cacheLength: 15,
matchContains: false,
max: 10,
minLength: 3,
delay: 800,

Now we will add a checkbox to enable/disable jQuery UI Autocomplete.

<input id="autocmpldisable" type="checkbox" name="autocmpldisable" />
<label for="autocmpldisable">Disable jQuery UI Autocomplete</label>

The enable/disable jQuery UI Autocomplete code:

// Disable Autocomplete

$("#autocmpldisable").click ( function() {

if ( !$(this).is ( ":checked" ) ) // If the check-box is not checked,
{ // enable autocomplete

$( "#autocomplete" ).autocomplete({
disabled: false

else // If the checkbox is checked,
{ // disable autocomplete
$( "#autocomplete" ).autocomplete({
disabled: true


That’s it. Happy coding !

2 Responses

  1. kenny October 20, 2013 / 11:40 PM

    What a excellent website I will share this website with my twittter followers.

  2. Heather October 31, 2013 / 9:41 PM

    This specific blog, “Disable jQuery UI Autocomplete – How to” was
    in fact perfect. I am producing out a replicate to clearly show my personal good friends.
    Thanks for your time,John

Leave a Reply

Your email address will not be published. Required fields are marked *