jQuery UI campo oculto actualización de autocompletar con valor, pero etiqueta de visualización en la interfaz de usuario, en conjunción con ASMX

Question

En el siguiente fragmento, ¿cómo puedo obtener el jQuery autocompletado plugin para:

1. actualización de un campo oculto con el ID de usuario
2. Actualizar '#MessageTo' con el nombre completo

creo que necesito utilizar .result, pero no puedo averiguar la sintaxis. Tenga en cuenta que estoy usando ASMX por lo que debe hacer un post (no quiero permitir riesgo de seguridad)

$("#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 
         }; 
        })); 
       } 
      }); 
     } 
    }); 

veo algunos mensajes similares, pero no en conjunción con ASMX.

Answer 1

Creo que está interesado en actualizar otros elementos HTML en la página, cuando el usuario selecciona algo de un cuadro de texto habilitado para autocompletar, ¿es así?

El código que tienes arriba probablemente ya funciona, para proporcionar autocompletar "sugerencias" a medida que el usuario escribe. Si entiendo correctamente, desea actualizar algunos campos después de que el usuario acepte una de las sugerencias.

Para hacer eso, use el select miembro de las opciones de autocompletar.

$("#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; 
     } 

    }); 

Además: su uso de ASMX es irrelevante. Desde la perspectiva de autocompletar, es solo una fuente de datos. Además, el uso de POST es irrelevante. Es posible configurar ASMX en el lado del servidor para permitir HTTP GET. No es un agujero de seguridad si lo habilitas. Es solo una manera diferente de aceptar solicitudes.

El cuadro de autocompletar no puede decir si el lado del servidor es ASMX o Python, o ASP-classic, o PHP, o cualquier otra cosa. Si he entendido la pregunta correctamente, su comentario de que veo algunas publicaciones similares pero no junto con ASMX es irrelevante.

Answer 2

Tiene razón en que desea usar la opción de configuración de selección: los valores que desea pasan a su función personalizada como ui.item.value y ui.item.label. Puede return false para evitar el comportamiento predeterminado y acceder al elemento de destino utilizando this. es decir

$("#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; 
    } 
});