jquery：预填充自动完成字段

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 不是数据库字段 - 它是我在模型上定义的虚拟属性。 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​​ 填充字段会更有意义。即使您在编辑表单中使用 ajax，您也可以让控制器将数据传递给视图。除非您正在做的事情不会将数据保存到数据库中......

也许需要更深入地了解您为什么要这样做。