jquery：预填充自动完成字段

Posted 2023-05-09

【中文标题】jquery：预填充自动完成字段

【英文标题】：jquery: prepopulating autocomplete fields

【发布时间】：2011-02-01 00:57:09

【问题描述】：

我正在为 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，所以一旦数据到达客户端，我需要帮助来处理数据。

【问题讨论】：

没人能回答吗？我认为这对于了解 javascript 的人来说会很容易。

【参考方案1】：

没关系，我解决了：

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

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

【参考方案2】：

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

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

【讨论】：

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

@Chris 可能的见解：要使 tokenInput 工作，它需要一个名称来向用户显示，以及一个 id 与表单一起发回。所以控制器需要给它一个像["id": 123, "name": "exceptional", "id": 147, "name": "jaw-dropping"]这样的json对象，但是表单需要像123,147这样的东西。通过这种方式，用户可以使用名称完成所有精美的 UI 操作，并且 inputToken 将其透明地转换为 id 的 CSV。