Geek Answers Handbook

JQuery autocomplete - How to view element label but pass position value

I am completely new to javascript, and I probably bite more than I can chew, but I'm trying to get a jQuery autcomplete widget on my Rails site.

I have a page called "links" where I want to be able to assign a person to a link. Using autocomplete, I should have a text box that omits the list of names of people suggested by autocomplete, and when they are selected, the username remains in the text box. But when the form is submitted, I do not want the person’s name to be submitted with the form, I want the identity number to be submitted with the form.

So, the question is how to have a person’s name after choosing him, to remain in the text box, but after sending the identifier is sent.

In Rails, this is how I deliver JSON data from my Person controller:

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

The above produces the following JSON text:

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

Using the autocomplete jQuery plugin, how can I get the "given name" in the proposed matches, leave the "given name" in the text box after selecting it, but when submitting the form, send the value "id".

I think I need to indicate in javascript what to show on the label and what value to send. Since I'm just getting javascript freeze, if you could explain how your answer works, which will be appreciated. Thanks.

+7
jquery-ui ruby-on-rails autocomplete
source share
2 answers

The best answer I can come up with is to create a hidden input field for the person id. When you select a name, the result () function updates the value of the hidden input with an identifier:

 <!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>
+5
source share

It is built into autocomplete. Take a look at some of the examples - one of them returns data in this format:

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

You can specify labels and values ​​in different ways.

+6
source share

More articles:


All Articles