2017-09-18 3 views
1

オートコンプリートJQueryUIウィジェットでドロップダウンを排除: はここ私はこのようにそれを実装<a href="http://jqueryui.com/autocomplete/" rel="nofollow noreferrer">http://jqueryui.com/autocomplete/</a></p> <p>からウィジェットを持っ

ここ
<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からもらった私のスクリプトである私のHTMLです:

<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の一番下にあります。 単語やフレーズを自動的に入力するのではなく、ドロップダウンが表示される理由はわかりません。私は、どのようにドロップダウンをターゲットにするかを見るために、火薬瓶で要素を調べることを試みましたが、明らかに正しいものを対象としませんでした。どちらかというと、ドロップダウンの原因となったスタイルを乗り越えたことはありませんでした。

* EDIT 私がやっていることは、入力ボックス内でのみオートコンプリート作業を行うことです。それはできますか?

答えて

0

API documentationにはこれに対する解決策があります。

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

初期化後、取得または無効にオプションを設定します:

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

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

OR

起動

指定された無効なオプションでオートコンプリートを初期化方法を無効にする:

$(".selector").autocomplete("disable"); 
関連する問題

 関連する問題