2017-09-18 56 views
1

我從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底部。 我不知道爲什麼,而不是自動完成一個單詞或短語,有一個下拉。我試圖用螢火蟲檢查元素,看看如何鎖定下拉菜單,但顯然我沒有瞄準正確的東西。無論是那種還是我都沒有超過這種下降風格。

*編輯 要做到這一點,我想要做的只是在輸入框內自動完成工作。那可以嗎?

回答

0

API documentation有一個解決方案。

初始化自動完成與指定的選項被禁用:

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

,獲取或設置選項被禁用,初始化後:

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

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

OR

調用禁用方法:

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