消除下拉以自动完成jQueryUI的部件

问题描述:

我从http://jqueryui.com/autocomplete/消除下拉以自动完成jQueryUI的部件

我实现它像这样的小部件: 这是我的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> 

这里是我的脚本,我从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> 

我试着用CSS来做这件事:

<style> 
    ui-widget { 
     display:none; 

    } 

    ui-menu-item{ 
     display:none; 
    } 

    ui-id-1{ 
     display:none; 
    } 


</style> 

那么我该如何摆脱下拉? *注意:样式标签出现在样式表链接之后,并且小部件位于我的html底部。 我不知道为什么,而不是自动完成一个单词或短语,有一个下拉。我试图用萤火虫检查元素,看看如何锁定下拉菜单,但显然我没有瞄准正确的东西。无论是那种还是我都没有超过这种下降风格。

*编辑 要做到这一点,我想要做的只是在输入框内自动完成工作。那可以吗?

API documentation有一个解决方案。

初始化自动完成与指定的选项被禁用:

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

,获取或设置选项被禁用,初始化后:

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

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

OR

调用禁用方法:

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