jQuery UI zum automatischen Vervollständigung Update verstecktes Feld mit dem Wert, aber Anzeige Label in UI, in Verbindung mit ASMX

Question

Im Snippet unten, wie kann ich die Jquery Autocomplete-Plugin zu erhalten:

1. -Update ein verstecktes Feld mit den UserID
2. Update ‚#MessageTo‘ mit dem vollständigen Namen

ich glaube, ich brauche verwenden .RESULT, aber ich kann die Syntax nicht herausfinden. Bitte beachten Sie, dass ich mit ASMX so muss ich einen Beitrag tun (wollen nicht Sicherheitsrisiko ermöglichen)

$("#MessageTo").autocomplete({ 
     dataType: "json", 
     autoFocus: true, 
     minLength: 3, 
     source: function (request, response) { 
      var postParams = "{ pattern: '" + $("#MessageTo").val() + "' }"; 

      return jQuery_1_7_1.ajax({ 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       url: '/Services/Users.asmx/GetNames', 
       data: postParams, 
       dataType: "json", 
       success: function (data) { 
        response($.map(data.d.Users, function (c) { 
         return { 
          label: c.FullName, 
          value: c.UserID 
         }; 
        })); 
       } 
      }); 
     } 
    }); 

Ich sehe einige ähnliche Beiträge, aber nicht in Verbindung mit ASMX.

Answer 1

Ich glaube, Sie bei der Aktualisierung andere HTML-Elemente auf der Seite interessiert sind, wenn der Benutzer etwas von einem der automatischen Vervollständigung-fähige Textfeldes wählt - ist das richtig?

Der Code, den Sie oben wahrscheinlich funktioniert bereits, die automatische Vervollständigung „Vorschläge“, wie die Benutzertypen zur Verfügung zu stellen. Wenn ich richtig verstanden habe, möchten Sie einige Felder aktualisieren, nachdem der Benutzer einen der Vorschläge akzeptiert.

Verwenden Sie dazu das Element select der Autocomplete-Optionen.

$("#MessageTo") 
    .autocomplete({ 
     dataType: "json", 
     autoFocus: true, 
     minLength: 3, 
     source: function (request, response) { 
      var postParams = "{ pattern: '" + $("#MessageTo").val() + "' }"; 

      return jQuery_1_7_1.ajax({ 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       url: '/Services/Users.asmx/GetNames', 
       data: postParams, 
       dataType: "json", 
       success: function (data) { 
        response($.map(data.d.Users, function (c) { 
         return { 
          label: c.FullName, 
          value: c.UserID 
         }; 
        })); 
       } 
      }); 
     }, 

     select: function (event, ui) { 
      var v = ui.item.value; 
      $('#MessageTo').html("Something here" + v); 
      $('#Hidden1').html("Something else here" + v); 
      // update what is displayed in the textbox 
      this.value = v; 
      return false; 
     } 

    }); 

Auch: Ihre Verwendung von ASMX ist irrelevant. Aus Sicht der Autocomplete ist es nur eine Quelle für Daten. Auch die Verwendung von POST ist irrelevant. Es ist möglich, ASMX auf der Serverseite zu konfigurieren, um HTTP GET zu erlauben. Es ist kein Sicherheitsloch, wenn Sie es aktivieren. Es ist nur eine andere Art, Anfragen zu akzeptieren.

Die Autocomplete-Box kann nicht sagen, ob die Server-Seite ASMX oder Python ist, oder ASP-klassisch, oder PHP, oder irgendetwas anderes. Wenn ich die Frage richtig verstanden habe, ist Ihr Kommentar, dass ich ähnliche Posts sehe, aber nicht in Verbindung mit ASMX ist irrelevant.

Answer 2

Sie haben Recht, dass Sie die Konfigurationsauswahloption verwenden möchten - die Werte, die Sie möchten, werden an Ihre benutzerdefinierte Funktion als ui.item.value und ui.item.label übergeben. Sie können return false das Standardverhalten verhindern und auf das Zielelement zugreifen, indem Sie this verwenden. d. h.

$("#MessageTo").autocomplete({ 
    /* Existing code is all OK */ 

    select: function (event, ui) { 
     // Set autocomplete element to display the label 
     this.value = ui.item.label; 

     // Store value in hidden field 
     $('#hidden_field').val(ui.item.value); 

     // Prevent default behaviour 
     return false; 
    } 
});