Eliminate dropdown with autocomplete JQueryUI widget

Question

I got the widget from http://jqueryui.com/autocomplete/

I implemented it like this: Here's my HTML

<form id="search" class="homepage-search" action="/search/" method="GET">
    <legend><label for="tags">search</label></legend>


    <input name="sort" value="rel" type="hidden">

    <div class="ui-widget">
    <!--<input id="query"  class="querybox flatinput ui-autocomplete-input" name="query" data-autocomplete="search-count" autocorrect="off" autocapitalize="off" placeholder="search" autofocus autocomplete="off">-->
    <input id="query"  class="querybox flatinput ui-autocomplete-input tags" name="query" data-autocomplete="search-count" autocorrect="off" autocapitalize="off" placeholder="search" autofocus autocomplete="off">

    </div>

Here is my Script which I got from JQueryUI:

 <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 = [
      "help",
      "faq",
      "abuse",
      "legal",
      "avoid scams and fraud",
      "personal safety tips",
      "terms of use",
      "privacy policy",
      "system status",
      "about Craigslist",
      "Craigslist open source",
      "Craigslist blog",
      "best-of-craigslist",
      "craigslist TV",
      "activities",
      "artists",
      "childcare",
      "classes",
      "events",
      "general",
      "local news",
      "lost+found",
      "musicians",
      "pets",
      "politics",
      "rideshare",
      "volunteers",
      "strictly platonic",
      "women seek women",
      "women seeking men",
      "men seeking women",
      "men seeking men",
      "misc romance",
      "casual encounters",
      "missed connections",
      "rants and raves",
      "apple",
      "arts",
      "atheist",
      "autos",
      "beauty",
      "bikes",
      "celebs",
      "comp",
      "crafts",
      "diet",
      "divorce",
      "dying",
      "eco",
      "educ",
      "eductation",
      "feedbk",
      "feed-back",
      "feed back",
      "film",
      "fitness",
      "fixit",
      "food",
      "frugal",
      "gaming",
      "garden",
      "haiku",
      "help",
      "history",
      "housing",
      "jobs",
      "jokes",
      "kink",
      "legal",
      "linux",
      "m4m",
      "manners",
      "marriage",
      "media",
      "money",
      "motocy",
      "music",
      "nonprofit",
      "non-profit",
      "open",
      "open relationships",
      "outdoor",
      "outdoors",
      "out-door supplies",
      "camping",
      "over 50",
      "parent",
      "pets",
      "philos",
      "photo",
      "p.o.c.",
      "psych",
      "queer",
      "recover",
      "religion",
      "romance",
      "science",
      "spirit",
      "sports",
      "tax",
      "taxes",
      "travel",
      "tc",
      "vegan",
      "w4w",
      "wed",
      "wine",
      "women",
      "words",
      "writting",
      "yoga",
      "apts/housing",
      "housing swap",
      "housing wanted",
      "office / commercial",
      "parking / storage",
      "local news"
    ];




    $( ".tags" ).autocomplete({
      source: availableTags
      //minLength:1
    });
  } );


  </script>

I tried doing this with CSS:

<style>
    ui-widget {
        display:none;

    }

    ui-menu-item{
        display:none;
    }

    ui-id-1{
        display:none;
    }


</style>

So how do I get rid of the drop down? *Note: the style tags come after style sheet links and the widget is at the bottom of my html. I am not sure why instead of just completing a word or phrase automatically, there is a drop down. I have tried inspecting the element with firebug to see how to target the drop down, but obviously I didn't target the right thing. Either that or I didn't over ride the style causing the drop down.

*EDIT To be clear, what I am trying to do is have autocomplete work inside of the input box only. Is that do-able?

Answer 1

The API documentation has a solution for this.

Initialize the autocomplete with the disabled option specified:

 $( ".selector" ).autocomplete({ disabled: true }); 

Get or set the disabled option, after initialization:

 // Getter var disabled = $( ".selector" ).autocomplete( "option", "disabled" ); // Setter $( ".selector" ).autocomplete( "option", "disabled", true ); 

OR

Invoke the disable method:

 $( ".selector" ).autocomplete( "disable" );