jQuery autocomplete - Как просмотреть метку элемента, но отправить значение элемента - PullRequest
7 голосов
/ 10 июля 2010

Я совершенно новичок в javascript и, вероятно, кусаю больше, чем могу прожевать, но я пытаюсь заставить работать виджет jQuery autocomplete *1002*, работающий на моем сайте Rails.

У меня есть страница под названием "ссылки", где я хочу иметь возможность назначить человеку ссылку. Используя автозаполнение, я должен иметь текстовое поле, в котором выпадает список имен людей, предложенных автозаполнением, и при выборе имя человека остается в текстовом поле. Но когда форма отправлена, я не хочу, чтобы имена лиц отправлялись вместе с формой, я хочу, чтобы удостоверение личности отправлялось вместе с формой.

Таким образом, вопрос заключается в том, как сделать так, чтобы имя лица, которое было выбрано, оставалось в текстовом поле, но после отправки идентификатор лица был отправлен.

В Rails вот как я передаю данные JSON с моего контроллера Person:

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

Выше приведен следующий текст JSON:

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

Используя плагин автозаполнения jQuery, как я могу отобразить 'имя_данных' в предложенных совпадениях, оставив 'имя_данных' в текстовом поле после выбора, но отправив значение 'id' при отправке формы.

Я думаю, что мне нужно указать в javascript, какую метку показывать и какое значение отправлять. Поскольку я только знакомлюсь с javascript, если бы вы могли объяснить, как работает ваш ответ, это было бы оценено. Спасибо.

Ответы [ 2 ]

6 голосов
/ 11 июля 2010

Это встроено в автозаполнение. Посмотрите на некоторые примеры - один из них возвращает данные в следующем формате:

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

Вы можете указывать метки и значения по-разному.

5 голосов
/ 10 июля 2010

Лучший ответ, который я могу придумать, - создать скрытое поле ввода идентификатора человека.При выборе имени функция result () обновляет значение скрытого ввода с идентификатором:

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...