beseitigen Drop-Down mit der automatischen Vervollständigung jQueryUI Widget

Question

bekam ich das Widget von http://jqueryui.com/autocomplete/

ich es wie folgt umgesetzt: Hier ist mein 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> 

Hier mein Script ist, das ich von jQueryUI bekam:

<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> 

Ich habe versucht, dies mit CSS zu tun:

<style> 
    ui-widget { 
     display:none; 

    } 

    ui-menu-item{ 
     display:none; 
    } 

    ui-id-1{ 
     display:none; 
    } 


</style> 

Also, wie werde ich den Drop-Down loswerden? * Hinweis: Die Style-Tags kommen nach Style-Sheet-Links und das Widget befindet sich am Ende meines HTML-Codes. Ich bin mir nicht sicher warum, anstatt nur ein Wort oder eine Phrase automatisch zu vervollständigen, gibt es eine Drop-Down. Ich habe versucht, das Element mit einem Feuerwahn zu untersuchen, um zu sehen, wie ich das Drop-Down-Ziel anvisieren sollte, aber offensichtlich hatte ich nicht das richtige Ziel. Entweder das, oder ich habe den Stil, der den Drop-Down verursacht, nicht überfahren.

* EDIT Um klar zu sein, was ich versuche zu tun ist Autocomplete Arbeit nur innerhalb der Eingabebox haben. Ist das machbar?

Answer 1

Die API documentation hat eine Lösung dafür.

Initialisieren der zur automatischen Vervollständigung mit Behinderten-Option angegeben:

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

Holen oder deaktiviert Option, nach der Initialisierung:

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

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

ODER

Rufen Sie die Deaktivieren Sie die Methode:

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