jQuery UI aggiornamento completamento automatico campo nascosto con valore, ma etichetta di visualizzazione in UI, in concomitanza con ASMX

Question

Nel frammento di seguito, come posso ottenere il completamento automatico plug-in jQuery per:

1. aggiornare un campo nascosto con l'UserID
2. Aggiorna '#MessageTo' con il nome completo

credo ho bisogno di usare .result, ma io non riesco a capire la sintassi. Si prega di notare che io sto usando ASMX quindi devo fare un post (non si vuole abilitare rischio per la sicurezza)

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

vedo alcuni messaggi simili ma non in combinazione con ASMX.

Answer 1

Credo che siate interessati ad aggiornare altri elementi HTML sulla pagina, quando l'utente seleziona qualcosa da una casella di testo abilitata al completamento automatico - è vero?

Il codice che hai sopra probabilmente funziona già, per fornire "suggerimenti" di completamento automatico mentre l'utente digita. Se ho capito bene, si desidera aggiornare alcuni campi dopo che l'utente accetta uno dei suggerimenti.

Per fare ciò, utilizzare il membro select delle opzioni di completamento automatico.

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

    }); 

Inoltre: l'utilizzo di ASMX è irrilevante. Dal punto di vista del completamento automatico, è solo una fonte di dati. Inoltre, l'uso del POST è irrilevante. È possibile configurare ASMX sul lato server per consentire HTTP GET. Non è un buco di sicurezza se lo abiliti. È solo un modo diverso di accettare le richieste.

La casella di completamento automatico non è in grado di stabilire se il lato server è ASMX o Python, o ASP-classic, o PHP o qualsiasi altra cosa. Se ho capito correttamente la domanda, il tuo commento che vedo alcuni post simili ma non in combinazione con ASMX è irrilevante.

Answer 2

Si è corretto che si desidera utilizzare l'opzione di configurazione Seleziona: i valori che si desidera vengono passati alla funzione personalizzata come ui.item.value e ui.item.label. È possibile return false impedire il comportamento predefinito e accedere all'elemento di destinazione utilizzando this. Ad esempio

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