Sémantique de l'INTERFACE utilisateur déroulante de sélection du contenu à partir de l'API

Je suis en utilisant la Sémantique de l'INTERFACE utilisateur 2.0 et l'utilisation de données retourné à partir de son API pour construire les options à l'intérieur de ma liste déroulante.

Pour déroulante lui-même, je suis en utilisant un code qui est pratiquement le même que cette code indiqué dans la Sémantique de l'INTERFACE utilisateur de la documentation:

<div class="ui search selection dropdown select-city">
  <input type="hidden" name="city">
  <i class="dropdown icon"></i>
  <div class="default text">Select City</div>
</div>

J'ai un service qui retourne au format json villes, puis Sémantique de l'INTERFACE utilisateur affiche dans la console que le résultat a été un succès avec tous les 261 villes:

"Using specified url"   ["/cities/"]    1648
"Querying URL"  ["/cities/"]    0
"Sending request"   [undefined, "get"]  0
"Successful API Response"   [Object { success=true, results=[261]}]

La /les villes de point de terminaison de retour d'un format json:

{"success":true,"results":[{"description":"Opole","data-value":1},{"description":"Wrocław","data-value":2},{"description":"Warszawa","data-value":3},{"description":"Budapest","data-value":4},{"description":"Köln","data-value":5}, ...]}

Il semble que la Sémantique de l'INTERFACE utilisateur n'est pas directement en comprendre le format du json.

J'ai essayé de nombreux formats json attributs, même essayé de changer un peu le html. Par exemple, essayé d'ajouter un vide <div class="menu"> dans le bas de la sélection, en espérant que la Sémantique de l'INTERFACE utilisateur serait le remplir, par exemple,:

<div class="ui search selection dropdown select-city">
  <input type="hidden" name="city">
  <i class="dropdown icon"></i>
  <div class="default text">Select City</div>
  <div class="menu"></div>
</div>

Je suis en train de faire correspondre le format des attributs avec ceux de la exemple, par exemple, à l'aide de "données de la valeur" attribut.

Mais il ne fonctionne pas non plus, j'ai vu Sémantique de l'INTERFACE utilisateur vérifie que dans le code source, de sorte qu'il ne fait aucune différence. À la fin, mon problème persiste et pas d'éléments sont insérés dans la liste déroulante de sélection.

Comment êtes-vous exactement de l'extraction de ces données? Pourriez-vous poster le code?
Désolé pour le retard à répondre de la façon dont je suis l'extraction de ces données. Auparavant, j'ai été en utilisant la valeur par défaut .la fonction de l'api au sein de la sémantique de l'interface utilisateur. Depuis, il n'a pas de travail, je suis maintenant à l'aide d'un appel ajax et du remplissage du menu par moi-même, au lieu d'utiliser le processus automatique de la sémantique de l'interface utilisateur de l'api. Je vais essayer de refaire le code que j'utilisais avant, et je mettrai à jour la question.

OriginalL'auteur Eduardo | 2015-08-03

  1. 7

    Sans vous poster le code que vous utilisez, je suis un peu d'un coup de couteau, mais le dropdown attend les résultats des données d'être saisi comme { name: "Item 1", value: "value1" } comme expliqué dans le la partie pertinente de la documentation.

    Si vous avez de différents noms de domaine, vous pouvez lui faire un fields structure dans les paramètres pour remplacer ces:

    $('.ui.dropdown').dropdown({
    fields: { name: "description", value: "data-value" },
    apiSettings: {
        mockResponse: {
            success: true,
            results: [
                {"description":"Opole","data-value":1},
                {"description":"Wrocław","data-value":2},
                {"description":"Warszawa","data-value":3},
                {"description":"Budapest","data-value":4},
                {"description":"Köln","data-value":5}
            ]
        }
    }
});

    Le minimum de HTML requis:

    <div class="ui search selection dropdown">
    <div class="text">Search</div>
</div>

    ou:

    <div class="ui search selection dropdown">
    <input class="search"></input>
</div>

    Le vide <div class="menu"></div> est automatiquement inséré, mais un <input class="search"></input> est nécessaire et n'est insérée automatiquement si vous avez déjà un <div class="text"></div> élément.

    Note toutefois que, dans ce que je crois être un défaut dans la liste déroulante comportement, il ne charge pas les données jusqu'à ce que vous commencez à taper dans le champ de recherche et donc juste en cliquant sur la liste déroulante de l'icône n'est pas suffisant.

    Super! C'était le problème ici. Réglage de l' "champs" de hachage a fait le tour. Merci.
    Un problème avec cette réponse, c'est que la liste déroulante arrêté de chercher, par exemple,: jsfiddle.net/nLghbfs8 par commencez à taper "K" filtre "Cologne". Je ne sais pas pourquoi.
    Lors de l'utilisation de l'interface de l'API, il s'attend à ce que l'API de requête pour faire le filtrage. Vous pouvez rechercher à l'aide de mockResponseAsync et de trouver la query dans les paramètres de l'objet à des fins de test, mais sinon, vous avez besoin de votre serveur pour filtrer sur le terme de la requête.
    ah, ok, je vois. Merci pour la clarification. Je vais mettre à jour mon code côté serveur en conséquence, de sorte qu'il peut fonctionner comme prévu. Merci beaucoup!
    Salut à tous, je suis confronté au même problème ici, la recherche ne fonctionne pas anymore...@Parakleta est-ce que ça signifie que je dois mettre mon serveur pour filtre sur le terme de la requête? Merci à l'avance.

    OriginalL'auteur Parakleta