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
  });
});

然而，当页面加载时，我发现它只充满了数百个标题为“undefined”的条目。即使我将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\"}]"
  });
});

这显然不是一个解决方案，我只是因为沮丧而尝试了一下，但得到了相同的行为。

我的两个问题：

一、为什么在我尝试预填文本框时，它们会被填满“undefined”标签，并如何使它们成功地预填？

二、我计划在同一页上有许多类似的自动完成字段（用于同时编辑多个记录-它们都查询同一位置）。如何使每个自动完成字段从它自己的文本框中获取其预填值？例如（将这些设置应用于具有某个特定类别的所有输入框，而不仅仅是特定 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，所以需要帮助在客户端处理数据。

- David Tildon

---

没有人能回答这个问题吗？我以为对于懂JavaScript的人来说应该很容易。 - David Tildon

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
    })
  });
});

- David Tildon

Answer 2

我认为控制器提供数据给编辑视图并通过 Ruby 设置输入元素的值属性来填充字段更有意义。即使您正在使用 Ajax 编辑表单，也可以让控制器将数据传递给视图。除非您正在进行一些不保存数据到数据库的操作...

也许需要更多的了解为什么您要以这种方式进行操作。

- Chris Wagner

---

更新了问题以进一步解释。 - David Tildon

@Chris 可能的见解：为了使tokenInput正常工作，它需要一个名称来向用户展示，并且需要一个ID与表单一起发送回来。因此，控制器需要给它一个JSON对象，如[{"id": 123, "name": "exceptional"}, {"id": 147, "name": "jaw-dropping"}]，但是表单需要得到类似于123,147的东西。这样，用户可以使用所有花哨的UI功能来操作名称和inputToken将其透明地转换为ID的CSV格式。 - Shawn