Question

我对javascript完全不熟悉并且可能比我可以咀嚼更多，但我正在尝试让jQuery autcomplete小部件在我的Rails网站上运行。

我有一个名为“链接”的页面，我希望能够将某个人分配到链接。使用自动填充我应该能够有一个文本框，其中包含自动填充建议的人名列表，选中后，人名仍保留在文本框中。但是当提交表单时，我不希望随表单一起发送的人名，我希望随表单一起发送人员ID。

所以问题是如何选择人名，保留在文本框中，但一旦提交，就会提交人员ID。

在Rails中，这就是我从Person控制器提供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'，但在提交表单时发送'id'值。

我想我需要在javascript中指定要标记的内容以及要发送的值。因为我刚刚掌握了javascript，如果你能解释你的答案是如何工作的，那将是值得赞赏的。感谢。

Answer 1

这内置于自动完成功能中。看一些例子 - 其中一个以这种格式返回数据：

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

您可以不同方式提供标签和值。

Answer 2

我能想出的最佳答案是为此人的id创建一个隐藏的输入字段。当您选择名称时，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>

jQuery自动完成 - 如何查看项目标签但提交项目值

2 个答案: