JQuery UI Autocomplete avec .Net MVC: Comment afficher l'étiquette lorsqu'elle est sélectionnée, mais enregistrer la valeur

J'ai mis en œuvre la saisie semi-automatique et j'ai de la difficulté avec l'étiquette de la contre valeur dans la zone de texte après l'élément est sélectionné. Lorsque je tape un code postal, je vois l'étiquette dans la liste déroulante:

JQuery UI Autocomplete avec .Net MVC: Comment afficher l'étiquette lorsqu'elle est sélectionnée, mais enregistrer la valeur

mais quand je sélectionne, au lieu de l'étiquette indiquant dans la zone de texte, la valeur (qui est l'ID qui doit être enregistré dans la base de données) s'affiche:

JQuery UI Autocomplete avec .Net MVC: Comment afficher l'étiquette lorsqu'elle est sélectionnée, mais enregistrer la valeur

Comment dois-je quand même lui montrer l'étiquette après il est sélectionné, mais lorsque le formulaire est enregistré, il passe le ZipCodeID pour le domaine?

Voici ma méthode de Contrôleur:

public JsonResult FindZipCode(string term)
    {
        VetClinicDataContext db = new VetClinicDataContext();

        var zipCodes = from c in db.ZipCodes
                       where c.ZipCodeNum.ToString().StartsWith(term)
                       select new { value = c.ZipCodeID, label = c.ZipCodeNum};

        return this.Json(zipCodes, JsonRequestBehavior.AllowGet);
    }

Et voici mon balisage:

<script type="text/javascript">
    $(document).ready(function() {
        $("#ZipCodeID").autocomplete({
                  source: '<%= Url.Action("FindZipCode", "Customers") %>',
        });
    });
</script>

<div class="ui-widget"><input type="text" name="ZipCodeID" id="ZipCodeID" /></div>

EDIT: Voici mon code qui fonctionne:

Contrôleur:

public JsonResult FindZipCode(string term)
    {
        VetClinicDataContext db = new VetClinicDataContext();

        var zipCodes = from c in db.ZipCodes
                       where c.ZipCodeNum.ToString().StartsWith(term)
                       select new { value = c.ZipCodeID, label = c.ZipCodeNum};

        return this.Json(zipCodes, JsonRequestBehavior.AllowGet);
    }

et de balisage:

<script type="text/javascript">
    $(document).ready(function() {
        $("#ddZipCode").autocomplete({
            source: '<%= Url.Action("FindZipCode", "Customers") %>',
            select: function(event, ui) {
                var zipCodeID = parseInt(ui.item.value, 1);
                $("#ddZipCode").val(ui.item.label);
                $("#ZipCodeID").val(ui.item.value);
                return false;
            }
        });
    });
</script>

<div class="ui-widget"><input type="text" name="ddZipCode" id="ddZipCode" /></div>
<%= Html.Hidden("ZipCodeID")%>
ne sont pas les codes postaux assez unique afin de ne pas besoin d'une autre id? Je ne peux pas imaginer pourquoi vous le souhaitez sinon
bon point! quand j'ai construit à l'origine la base de données, j'ai été tout à fait nouveau. J'ai mis mon zip codes pour avoir une auto incrémenté ID pas vraiment penser que les codes postaux sont uniques en eux-mêmes. Je pouvais revenir en arrière et changer maintenant, mais les effets seraient tricke dans de nombreux autres changements ailleurs. Je devrais probablement faire de toute façon... 🙂 Merci!
Pas de problèmes. C'est super ce que vous êtes en train d'apprendre des choses et de prendre une approche pragmatique.
Comment faites-vous envoyer à la recherche de "terme" dans votre méthode FindZipCode automatiquement?

OriginalL'auteur Ben | 2010-09-28