Obligar a un usuario a seleccionar JQuery UI Autocompletar y rellenar un campo oculto después de seleccionar

Question

Tengo un formulario HTML grande que contiene muchos campos que necesitan un autocompletar para las cuentas. Etiquetan estos campos con la clase AccountLookup y jQuery hace el trabajo sucio para el autocompletado:

$(".AccountLookup").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "Lookup.asmx/GetAccounts", 
      data: "{ 'Search': '" + request.term + "' }", 
      dataType: "json", 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      dataFilter: function (data) { return data; }, 
      success: function (data) { 
       response($.map(data.d, function (item) { 
        return { 
         value: item.Value 
        } 
       })) 
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
       alert(textStatus); 
      } 
     }); 
    }, 
    minLength: 3 
}); 

Ahora, cuando un usuario selecciona algo de la autocompletar lo necesito para llenar un campo oculto justo antes del campo de entrada etiquetados; probablemente usando algo como:

$(this).prev().val(item.Key); 

¿Cómo incorporo esta funcionalidad? Además, ¿cómo obligo a un usuario a seleccionar desde el autocompletar? (Todos los valores están predefinidos, el usuario no puede agregar nuevos.)

EDIT: Por lo que yo entiendo de inspeccionar el DOM, seleccione la opción está llenando en el campo de formulario oculto.

select: function (event, ui) { 
    $(this).prev().val(ui.item.key); 
} 

Answer 1

$(".AccountLookup").autocomplete({ 
    /*...*/ 
}).result(function(event, item) { 
    $(this).prev().val(item.Key); 
}); 

También es posible usar un jQuery validate para asegurar que el campo se rellena.

Answer 2

Para la acción de selección, intente utilizar la opción formatItem. Puede formatear cada resultado para tener un evento onclick que rellenará el otro cuadro de texto.

Para forzar la selección de autocompletar, debe utilizar la opción mustMatch.

http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

Answer 3

Sé que esto es una entrada antigua --- pero me encontré con que al tratar de resolver un problema similar (obligando al usuario a seleccionar un elemento de la lista) ...

 $("#ac").autocomplete({ 
      source: function (req, resp) { 
        //add code here... 
      }, 
      select: function (e, ui) { 
       $(this).next().val(ui.item.id); 
      }, 
      change: function (ev, ui) { 
       if (!ui.item) 
        $(this).val(""); 
      } 
     }); 

Answer 4

de fuerza la selección, puede utilizar "change" event de autocompletar

 var availableTags = [ 
      "ActionScript", 
      "AppleScript" 
     ]; 
     $("#tags").autocomplete({ 
      source: availableTags, 
      change: function (event, ui) { 
       if(!ui.item){ 
        //http://api.jqueryui.com/autocomplete/#event-change - 
        // The item selected from the menu, if any. Otherwise the property is null 
        //so clear the item for force selection 
        $("#tags").val(""); 
       } 

      } 

     }); 

Answer 5

me encontré con este mismo problema hace bastante tiempo y algunos post me ha ayudado a lo largo de la misma. Desde entonces, modifiqué el código porque descubrí que había casos en los que deseaba rellenar uno o más campos a partir de la información devuelta. En la opción de selección de autocompletar, agregué una función.

select: function (e, ui) {ReSetField({'txtID':'id','txtPrice':'price' [,etc...]}, ui) } 

La función "ResetFields" toma entonces en una lista JSON de nombres de elementos emparejados con nombres de campos y utiliza el nombres de campos para que coincida con los elementos en el objeto de interfaz de usuario. El valor puede extraerse del elemento ui y colocarse en el elemento html.

function ReSetField(_flds, _vals) { 
    //Set up the flds to be reset with values passed in. 
    try { 
    if (_flds != undefined) { 
     if ($.type(_flds) == 'string') { 
     _flds = JSON.parse(_flds); 
     }; 
     var _fld = null; 
     var _val = ''; 
     $.each(_flds, function (index) { 
     if (index.length > 0) { 
      _fld = '#' + index; //Set the forms field name to set 
      _val = _flds[index]; //Pick up the field name to set the fields value 
      $fld = $(_fld); 
      $fld.val(_vals.item[_val]); //Set the fields value to the returned value    
      } 
     } 
     }) 
    }; 
    } 
    catch (e) { 
    alert('Cannot set field ' + _fld + '.'); 
    } 
} 

Al seguir el "fieldlist" en el elemento HTML como un atributo como "fieldlist" y el uso de una clase como "ComboBox" entonces puedo usar una sola función para encontrar todos los elementos ComboBox y configura el autocompletado en un formulario que reduce la cantidad de código requerido para manejar 2 o más búsquedas en un formulario.