javascript - 语义 UI 下拉列表显示“未定义”

Question

我很难让语义 UI（v2.4.2）dropdown按预期工作。

如果我单击向下箭头，dropdown则会显示未定义项目的列表：

如果我键入标签的名称，则会dropdown显示正确的标签列表：

HTML：

<div id="myList" class="ui multiple search selection dropdown">
  <input type="hidden" name="tags">
  <i class="dropdown icon"></i>
  <div class="default text">Tags</div>
</div>

<script type="text/javascript">
  $("#myList").dropdown({
    minCharacters : 3,
    allowAdditons : true,
    apiSettings   : {
        url       : '//localhost:9393/tags/search?q={query}',
        onResponse: function(tags) {

          console.debug('onResponse');

          var response = {
              success: true,
              results: []
          };
          $.each(tags, function(index, item) {
            response.results.push({
              name: item.name,
              value: item.id
            });
          });
          return response;
        }
    }
  });
</script>

JSON API 以数组形式返回标签​​列表：

[
  {
    "id": 5,
    "name": "mssql",
    "description": "Microsoft SQL Server is a relational, database-management system developed by [Microsoft](https://www.microsoft.com/)."
  },
  {
    "id": 6,
    "name": "oracle",
    "description": "Oracle's DBMS"
  },
  {
    "id": 8,
    "name": "plsql",
    "description": "[PL/SQL](https://en.wikipedia.org/wiki/PL/SQL) is Oracle Corporation's procedural extension for SQL and the Oracle relational database."
  }
]

奇怪的是，onResponse回调仅在搜索框中输入值时触发。

我错过了什么？

标签： javascriptsemantic-ui

Answer 1

您已在此处将启动搜索的最小字符数设置为 3：

$("#myList").dropdown({
   minCharacters : 3,
   allowAdditons : true

只需添加：

显示焦点：真

到您的配置对象。它应该可以解决问题。