jquery-ui autocomplete avec ASP MVC suggestions ne pas afficher

Question

J'ai essayé d'obtenir un exemple simple de la saisie semi-automatique jquery-ui pour fonctionner. J'ai une configuration de contrôleur pour gérer la requête, et il renvoie le json qui semble être en ordre, mais je ne reçois aucune suggestion.

Voici les bibliothèques js Je suis notamment:

<script type="text/javascript" language="javascript" src="/Scripts/jquery-1.4.1.js"></script> 

<script type="text/javascript" language="javascript" src="/Scripts/jquery-ui-1.8.1.custom.min.js"></script> 

<link href="/Content/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" /> 

et est ici le javascript et les balises de formulaire:

<script type="text/javascript"> 
    $(function() { 

     $("#organization").autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        url: '/Organization/OrganizationLookup', 
        dataType: "json", 
        data: { 
         limit: 12, 
         q: request.term 
        } 
       }) 
      }, 
      minLength: 2 
     }); 
    }); 
</script> 

<div class="ui-widget"> 
    <label for="organization">Organization: </label> 
    <input id="organization" /> 
</div> 

je reviens une réponse JSON qui semble raisonnable de mon contrôleur:

[ 
    { 
    "id":"Sector A", 
    "value":"Sector A" 
    }, 
    { 
    "id":"Sector B", 
    "value":"Sector B" 
    }, 
    { 
    "id":"Sector C", 
    "value":"Sector C" 
    } 
] 

L'ID et la valeur semblent être le nom par défaut que la saisie semi-automatique recherche pour.

Mais je ne reçois aucune joie du tout. Des pensées?

Answer 1

Pas le problème ici - vous devriez mettre css avant javascript. Toujours.

Vous ne faites rien avec la valeur de retour. Vous devez utiliser une fonction de rappel pour prendre ces données et faire quelque chose avec elle. (Le paramètre "succès:", je crois).

Answer 2

Merci à la suggestion de Hogan, j'ai ajouté la fonction de rappel suivante au paramètre de réussite, et j'étais bien aller:

success: function (data) { 
          response($.map(data, function (item) { 
           return { 
            label: item.label, 
            value: item.value 
           } 
          }))