jQuery autocompletar - Cómo ver la etiqueta del artículo pero enviar el valor del artículo

Soy totalmente nuevo en javascript y probablemente estoy mordiendo más de lo que puedo masticar, pero estoy tratando de obtener el widget jQuery autcomplete trabajando en mi sitio de Rails.jQuery autocompletar - Cómo ver la etiqueta del artículo pero enviar el valor del artículo

Tengo una página llamada "enlaces" en la que deseo poder asignar una persona a un enlace. Usando el autocompletar debería poder tener un cuadro de texto que despliega una lista de nombres de personas sugeridos por el autocompletado, y cuando se selecciona, el nombre de las personas permanece en el cuadro de texto. Pero cuando se envía el formulario, no deseo que se envíe el nombre de las personas con el formulario, quiero que se envíe el ID de persona con el formulario.

Así que la pregunta es cómo hacer que el nombre de las personas una vez seleccionadas, permanezca en el cuadro de texto, pero una vez enviado se envía la identificación de las personas.

En Rails, esta es la forma en que estoy suministrando los datos JSON de mi controlador de Persona:

def index 
    if params[:term] 
    @people = Person.find(:all,:conditions => ['given_name LIKE ?', "#{params[:term]}%"], :limit => 5) 
    else 
    @people = Person.all 
    end 

    respond_to do |format| 
    format.html # index.html.erb 
    format.json { render :json => @people.to_json(:only => [:id, :given_name]) } 
    end 
end

Las salidas anteriores el siguiente texto JSON:

[{"person":{"id":1,"given_name":"dale"}},{"person":{"id":2,"given_name":"sally"}},{"person":{"id":3,"given_name":"joe"}}]

Usando el plugin autocompletar jQuery, cómo ¿Tengo el 'given_name' en las coincidencias sugeridas, dejo el 'given_name' en el cuadro de texto una vez seleccionado, pero envíe el 'id' cuando se envíe el formulario?

Creo que necesito especificar en el javascript qué etiqueta mostrar y qué valor enviar. Como me estoy acostumbrando a javascript, si pudiera explicar cómo funciona su respuesta, sería de agradecer. Gracias.

Fuente

2010-07-10 Oscar

La mejor respuesta que se me ocurre es crear un campo de entrada oculto para la identificación de la persona. Cuando se selecciona un nombre, la función de resultado() actualiza el valor de la entrada oculta con el id:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" /> 
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" /> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script> 
    <script> 
    $(document).ready(function(){ 
    // your data 
    var data = [{"person":{"id":1,"given_name":"dale"}},{"person":{"id":2,"given_name":"sally"}},{"person":{"id":3,"given_name":"joe"}}]; 


    $("#person_name").autocomplete(data, { 
     // formatting of choices in drop down 
     formatItem: function(item) { 
     return item.person.given_name; 
     }, 
     // format of choice in input field 
     formatResult: function(item) { 
     return item.person.given_name + " (" + item.person.id + ")"; 
     } 

     // when choice is made, update value of hidden field with the id 
    }).result(function(event, data, formatted) { 
     $("#person_id").val(data.person.id); 
    }); 
    }); 
    </script> 

</head> 
<body> 
    Select a person: <input id="person_name" /> (dale, sally, joe) 
    <input type="hidden" id="person_id"/> 
</body> 
</html>

Fuente

2010-07-10 16:10:35

Gracias por su respuesta. Creo que su solución funcionará, pero esperaba que la capacidad de enviar un valor diferente al que se muestra en el cuadro de texto estaría integrado en el widget jQuery. Parece que esto debería ser posible sin el campo oculto, pero no estoy captando algo. Si no es posible, rodaré con la solución de campo oculto. – Oscar

Volví a revisar los documentos del widget jQuery y tu respuesta es correcta. La forma de enviar un valor diferente al que se muestra en el campo de texto (como en la ID de una persona y no en el nombre de la persona seleccionada) es a través de un campo oculto. Creo que estaba haciendo esto demasiado complicado al tratar de hacer que el widget suministre el valor oculto por sí mismo. El ejemplo en los documentos muestra claramente que el widget se usa en combinación con un campo oculto. Gracias. – Oscar

Este se construye en función de autocompletar. Mire algunos de los ejemplos-- uno de los que devuelve datos en este formato:

[{ 
    "id": "Ciconia ciconia", 
    "label": "White Stork", 
    "value": "White Stork2" 
}, 
{ 
    "id": "Platalea leucorodia", 
    "label": "Spoonbill", 
    "value": "Spoonbill" 
}]

Puede suministrar etiquetas y valores de manera diferente.

Fuente

2010-07-11 00:09:34 Matt

Gracias por la respuesta rápida. Lo que ha señalado es lo que estoy buscando, la función incorporada. ¿Tiene alguna sugerencia sobre cómo implementar esto? Podría estar equivocado, pero lo que entendí de los documentos es que "etiqueta" es lo que se muestra en la lista desplegable, y "valor" es lo que se almacena en el campo de texto una vez que se selecciona una "etiqueta". Lo único que he logrado hacer es seleccionar la "etiqueta" como "etiqueta": "Joe" que luego almacena el valor "4" (la identificación de personas) en el campo de texto. Esto es funcional, pero se ve estúpido ya que nadie quiere ver realmente la identificación de las personas. Alguna idea sobre esto? – Oscar

Acabo de volver a revisar los documentos en el widget jQuery como sugirió, y creo que ya lo he entendido entre su respuesta y la respuesta de @ ken a continuación. De acuerdo con los documentos, puedo especificar diferentes valores como los anteriores, y luego enviar un valor a un campo oculto, que luego será enviado a mi aplicación Rails. Supongo que estaba haciendo esto demasiado complicado ya que estaba tratando de hacer que el widget jQuery proporcione el valor oculto, cuando el ejemplo en los documentos muestra claramente que el widget se usa en combinación con un campo oculto. Gracias. – Oscar

(Traté de marcar tanto su respuesta como la de @ Ken como correcta, pero solo permite elegir una. Su respuesta me indicó el documento correcto, pero la respuesta original de @ Ken fue la solución según los documentos). – Oscar

jQuery autocompletar - Cómo ver la etiqueta del artículo pero enviar el valor del artículo

Respuesta

Cuestiones relacionadas