jQuery autocomplete - How to view item label but submit item value_问答_开发者

jQuery autocomplete - How to view item label but submit item value

开发者 https://www.devze.com 2023-01-06 04:50 出处：网络

I am totally new 开发者_JS百科to javascript and am probably biting of more than I can chew, but I am trying to get the jQuery autcomplete widget working on my Rails site.

I have a page called "links" where I want to be able to assign a person to a link. Using the autocomplete I should be able to have a textbox that drops down a list of peoples names suggested by the autocomplete, and when selected, the persons name remains in the textbox. But when the form is submitted I don't want the persons name sent with the form, I want the persons ID sent with the form.

So the question is how to have the persons name once selected, remain in the textbox, but once submitted the persons id is submitted.

In Rails, this is how I am supplying the 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 outputs the following JSON text:

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

Using the jQuery autocomplete plugin, how do I have the 'given_name' appear in the suggested matches, leave the 'given_name' in the textbox once selected, but send the 'id' value when the form is submitted.

I think I need to specify in the javascript what to label to show and what value to send. As I am just getting the hang of javascript, if you could explain how your answer works that would be appreciated. Thanks.

This is built into autocomplete. Look at some of the examples-- one of the ones returns data in this format:

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

You can supply labels and values differently.

The best answer I can come up with is to create a hidden input field for the person's id. When you select a name, the result() function updates the value of the hidden input with the 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>