автоматическое заполнение jQuery - Как просмотреть маркировку объекта, но отправить значение объекта
Я полностью плохо знаком с JavaScript и вероятно резок из больше, чем, я могу жевать, но я пытаюсь получить jQuery autcomplete виджет, работающий над моим сайтом направляющих.
У меня есть страница, названная "ссылками", где я хочу смочь присвоить человека ссылке. Используя автоматическое заполнение я должен смочь иметь текстовое поле, которое раскрывает список имен народов, предложенных автоматическим заполнением, и при выборе люди называют, остается в текстовом поле. Но когда форма отправлена, я не хочу имя людей, отправленное с формой, я хочу идентификатор людей, отправленный с формой.
Таким образом, вопрос состоит в том, как сделать, чтобы люди назвали когда-то выбранными, остались в текстовом поле, но когда-то утверждал, что идентификатор людей отправлен.
В направляющих это - то, как я снабжаю данными JSON от своего контроллера Человека:
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, как у меня есть 'given_name', появляются в предложенных соответствиях, оставляют 'given_name' в текстовом поле однажды выбранным, но отправляют 'идентификационное' значение, когда форма отправлена.
Я думаю, что должен указать в JavaScript, что маркировать для показа и что значение отправить. Поскольку я просто приобретаю навык JavaScript, если Вы могли бы объяснить, как Ваши работы ответа, которые будут цениться.Спасибо.
2 ответа
Лучший ответ, который я могу придумать, - это создать скрытое поле ввода для идентификатора человека. При выборе имени функция result() обновляет значение скрытого ввода с помощью 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>
Это встроено в автозаполнение. Посмотрите на некоторые примеры - один из них возвращает данные в следующем формате:
[{
"id": "Ciconia ciconia",
"label": "White Stork",
"value": "White Stork2"
},
{
"id": "Platalea leucorodia",
"label": "Spoonbill",
"value": "Spoonbill"
}]
Вы можете указать метки и значения по-разному.