Ruby on rails jQuery自动完成-如何查看项目标签但提交项目值
我对javascript完全陌生，可能吃得太多了，但我正在尝试让这个小部件在我的Rails站点上工作 我有一个名为链接的页面，我希望能够将一个人分配到一个链接。使用autocomplete，我应该能够有一个文本框，它可以下拉自动完成建议的人名列表，选中后，人名仍保留在文本框中。但是在提交表单时，我不希望将人员姓名与表单一起发送，而是希望将人员ID与表单一起发送 因此，问题是如何在选择人员姓名后，将其保留在文本框中，但一旦提交，人员id将被提交 在Rails中，我是这样从Person控制器提供JSON数据的：Ruby on rails jQuery自动完成-如何查看项目标签但提交项目值,ruby-on-rails,jquery-ui,autocomplete,Ruby On Rails,Jquery Ui,Autocomplete,我对javascript完全陌生，可能吃得太多了，但我正在尝试让这个小部件在我的Rails站点上工作 我有一个名为链接的页面，我希望能够将一个人分配到一个链接。使用autocomplete，我应该能够有一个文本框，它可以下拉自动完成建议的人名列表，选中后，人名仍保留在文本框中。但是在提交表单时，我不希望将人员姓名与表单一起发送，而是希望将人员ID与表单一起发送 因此，问题是如何在选择人员姓名后，将其保留在文本框中，但一旦提交，人员id将被提交 在Rails中，我是这样从Person控制器提供JS
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
[{"person":{"id":1,"given_name":"dale"}},{"person":{"id":2,"given_name":"sally"}},{"person":{"id":3,"given_name":"joe"}}]
我认为我需要在javascript中指定要显示的标签和要发送的值。由于我刚刚掌握javascript的诀窍，如果您能解释一下您的答案是如何工作的，我将不胜感激。谢谢。我能想到的最好答案是为个人id创建一个隐藏输入字段。当您选择一个名称时，结果函数会用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"
}]
您可以提供不同的标签和值。感谢您的快速回复。您指出的是我正在寻找的内置功能。你对如何实现这一点有什么建议吗？我可能错了，但我从文档中了解到，标签是下拉列表中显示的内容，而值是选择标签后存储在文本字段中的内容。我唯一能做的就是选择标签，比如label:Joe，然后将persons ID的值'4'存储在文本字段中。这是功能性的，但看起来很愚蠢，因为没有人想真正看到个人ID。对此有什么想法吗？只要按照您的建议重新查看jQuery小部件上的文档，我想我现在已经在您的答案和下面@ken的答案之间找到了答案。根据这些文档，我可以如上所述指定不同的值，然后将一个值提供给一个隐藏字段，然后将该字段发送到我的Rails应用程序。我想这太复杂了，因为我试图让jQuery小部件提供隐藏值，而文档中的示例清楚地表明小部件与隐藏字段结合使用。谢谢。我试着把你的答案和@Ken的答案都标为正确，但只能选一个！你的回答让我找到了正确的医生，但是@Ken的原始答案是根据医生的答案。@Dale-如果你愿意，你可以给Matt一票。这至少会给他一些分数。@Ken-我是个新手，所以我甚至没有足够的代表分数来提升投票权！我至少需要15个。谢谢你的回复。我认为您的解决方案会起作用，但我希望jQuery小部件能够内置发送不同于文本框中显示的值的功能。似乎这在没有隐藏场的情况下是可能的，但我没有抓住什么。如果不可能，我将使用隐藏字段解决方案。我重新查看了jQuery小部件文档，您的答案是正确的。发送与文本字段中显示的值不同的值（如个人ID中的值，而不是所选的姓名）的方法是通过隐藏字段。我想我试图让小部件自己提供隐藏的值，这太复杂了。文档中的示例清楚地表明，小部件与隐藏字段结合使用。谢谢