Question

我正在为jquery（http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry）使用标记化自动完成插件。我主要使用Ruby，但我真的不熟悉javascript。

我的基本设置如下所示，适用于新的空白表单：

$(document).ready(function () {
  $("#tag_ids_field").tokenInput("/tags", {
    queryParam: "search"
  });
});

问题出现在我尝试预填充时，例如编辑页面。我正在尝试做这样的事情（当页面加载时，“#tag_ids_field”文本框包含JSON - 这种方式在应用程序方面更简洁）。

$(document).ready(function () {
  var tags = $("#tag_ids_field").html();
  $("#tag_ids_field").tokenInput("/tags", {
    queryParam: "search",
    prePopulate: tags
  });
});

然而，当页面加载时，我发现它只是填充了数百个读取“未定义”的条目。即使我使用Rails提供的JSON输出并尝试将其粘贴在.js文件中，我也会得到这个：

$(document).ready(function () {
  $("#tag_ids_field").tokenInput("/tags", {
    queryParam: "search",
    prePopulate: "[{\"id\":\"44\",\"name\":\"omnis sit impedit et numquam voluptas enim\"},{\"id\":\"515\",\"name\":\"deserunt odit id doloremque reiciendis aliquid qui vel\"},{\"id\":\"943\",\"name\":\"exercitationem numquam possimus quasi iste nisi illum\"}]"
  });
});

这显然不是解决方案，我只是出于挫折尝试而且我得到了同样的行为。

我的两个问题：

其中一个，当我尝试预填充时，为什么我的文本框中填充了“未定义”标签，以及如何让它们成功预填充？

二，我打算在同一页面上有很多这样的自动填充字段（一次编辑多个记录时 - 它们都查询同一个地方）。如何让每个自动填充字段从其自己的文本框中获取预先填充的值？类似的东西（将这些设置应用于具有特定类的所有输入框，而不仅仅是特定ID的输入框）：

$(document).ready(function () {
  $(".tag_ids_field").tokenInput("/tags", {
    queryParam: "search",
    prePopulate: (the contents of that particular ".tag_ids_field" input box)
  });
});

Flash84x：我不确定你的目标是什么。 tag_ids_field不是db字段 - 它是我在模型上定义的虚拟属性。 setter（接受逗号分隔的id列表）定义记录与数据库中这些标记的关系。 getter（在页面加载时填充文本区域）可以返回我想要的任何内容 - 现在我将它设置为只返回JSON中的当前标记数据，因为一切都是那样的。

如果你愿意的话，我可以更详细地解释一下，但Ruby方面的效果很好，而且我很满意。我根本就不知道javascript，所以一旦它到达客户端，我需要帮助操作数据。

Answer 1

没关系，我把它解决了：

$(document).ready(function () {
  $(".tag_ids_field").each(function(index) {
    var ids = eval($(this).html());
    $(this).html('');

    $(this).tokenInput("/tags", {
      queryParam: "search",
      prePopulate: ids
    })
  });
});

Answer 2

我认为控制器将数据提供给编辑视图并通过在输入元素上设置value属性来通过ruby填充字段会更有意义。即使您正在编辑表单中，您也可以让控制器将数据传递给视图。除非您正在做一些没有将数据保存到数据库的事情......

也许需要更多的洞察力来解释你为什么要这样做。

jquery：预填充自动填充字段

2 个答案: