使用自动完成 JQueryUI 小部件消除下拉菜单答案

【问题标题】：Eliminate dropdown with autocomplete JQueryUI widget使用自动完成 JQueryUI 小部件消除下拉菜单
【发布时间】：2018-02-26 14:09:08
【问题描述】：

我从http://jqueryui.com/autocomplete/得到了这个小部件

我是这样实现的：这是我的 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 底部。我不知道为什么不是自动完成一个单词或短语，而是有一个下拉菜单。我曾尝试使用 firebug 检查元素以查看如何定位下拉菜单，但显然我没有定位正确的东西。要么就是这样，要么我没有过度使用导致下拉的样式。

*编辑需要明确的是，我要做的只是在输入框内进行自动完成工作。这样做可行吗？

【问题讨论】：

标签： jquery css user-interface widget

【解决方案1】：

API documentation 对此有解决方案。

使用指定的禁用选项初始化自动完成：
$( ".selector" ).autocomplete({
  disabled: true
});
初始化后获取或设置禁用选项：
// Getter
var disabled = $( ".selector" ).autocomplete( "option", "disabled" );

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

或

调用禁用方法：
$( ".selector" ).autocomplete( "disable" );

【讨论】：