В раскрывающихся списках семантического пользовательского интерфейса отображаются «неопределенные» - PullRequest
0 голосов
/ 13 ноября 2018

Мне трудно заставить семантический интерфейс (v2.4.2) dropdown работать как положено.

Если я нажму стрелку вниз, dropdown отобразит список неопределенных элементов:

enter image description here

Если я наберу имя тега, dropdown отобразит правильный список тегов:

enter image description here

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 срабатывает только при вводе значения в поле поиска.

Чего мне не хватает?

1 Ответ

0 голосов
/ 13 ноября 2018

Вы установили минимальное количество символов для начала поиска в 3 прямо здесь:

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

просто добавьте:

showOnFocus: true

к вашему объекту конфигурации.Это должно решить проблему.

...