Chosen: 从远程数据源获取

这比 jquery 自动完成要好一些，不是吗？ 我希望最终看到远程数据源（为搜索结果提供回调的能力）

我第三次提出这个要求。 如果能够像 jQuery UI 自动完成功能一样指定远程源，这将非常方便。

或者甚至更好：包括在 jQuery UI 中选择。 :)

+1

更具体地说，我的 +1 是为了使用带有自由文本输入的远程数据源的想法（例如，使用 ajax 调用来帮助标记）

对不起，我不够清楚，但“远程数据源”集成是我最初的意思，感谢您指出这一点。 当然，这个插件比 jQuery 自动完成功能要好得多。 正如 daFish 评论的那样，我很乐意将其视为 jQuery UI 本身的一部分。

+1 用于远程数据源支持

我不明白。 选择是关于SELECT元素的更好的可用性和美观性，而不是关于自动完成或获取远程数据。 如果您想要远程数据，请在 Chosen 调用之前收集它并将其放入 de DOM...

@juanghurtado ：如果我有一个包含 300K 项目的多选框，我真的无法将它完全写成 html。 Chosen 为搜索和选择提供了完美的界面。 还有许多其他库提供此功能，例如 [1]、[2] 等等。 在所有这些选择中效果最好，但它不支持非常大的集合 - 这是远程数据源支持将添加的内容。 此外，如果 Chosen 支持这一点，则意味着必须对一个插件而不是两个插件进行皮肤和更新。

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

好吧，如果你的SELECT项目上有 300k 个项目，（恕我直言）你做错了什么……有很多选项可以更好地处理该界面。

选择可以做很多事情......就像嗖嗖的军刀一样，它可以做很多事情（远程数据源、与项目的图像关联、自定义过滤、AJAX 查询......）并且不再是一个完美的工具（对于传统的SELECT更好的界面

El 10/08/2011, las 22:56, ivaynberg escribió:

@juanghurtado ：如果我有一个包含 300K 项目的多选框，我真的无法将它完全写成 html。 Chosen 为搜索和选择提供了完美的界面。 还有许多其他库提供此功能，例如 [1]、[2] 等等。 在所有这些选择中效果最好，但它不支持非常大的集合 - 这是远程数据源支持将添加的内容。 此外，如果 Chosen 支持这一点，则意味着必须对一个插件而不是两个插件进行皮肤和更新。

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

直接回复此邮件或在 GitHub 上查看：
https://github.com/harvesthq/chosen/issues/79#issuecomment -1776643

真的无法反驳……

我想从选择的搜索时获取远程数据，比如 jquery 自动完成插件，请帮助我

+1 支持远程数据。

任何你看你的用户界面都很好，但有些问题，比如不支持远程数据。

我认为这是可行的，但并不像人们想象的那么容易。 由于这是 github 并且是开源的，让我们看看一些代码。

@juanghurtado我也认为我们可以做到这一点而不会膨胀现有的功能，jquery 和原型都为我们提供了远程数据源所需的一切。

results_search() 似乎在按键期间被触发 - 这就是我将覆盖选择的默认行为的地方。 我需要更深入地挖掘，但看起来如果我们可以模仿 winnow_results() 并添加一种显示加载行为的方法（例如 winnow_loading_results()），这可以正常工作。

另一个要查看的函数是 winnow_results_clear();

困难的部分是弄清楚如何将其顺利集成到选择中。 它应该在选项中吗？ 它应该只是一个子类吗？ 这是核心开发人员会允许进入主项目的东西吗？

实际上 - 我们应该关闭这个问题，很多工作正在 #162 上完成，这似乎是我们想要的一切。

只是想我会补充一点，在这个时代，这个功能是必须的，我真的希望它很快就能实现。 在所有其他方面选择是完美的。 :)

从远程数据源获取问题发生了什么？

我猜是@pfiller加入对话的时候了。

+1 我很想看到这个

我在提供页面时立即加载远程值，因此如果我无法更新或获取新数据，如果我至少可以向选择添加新选项，那么我可以维护客户端直到页面刷新。 因此 +1 远程获取和/或 +1 添加新选项的能力。 希望这是有道理的...

+1 用于jaloka 请求

我有一个包含 17500 条记录的表，当我加载页面时它变得很慢，最后它崩溃了......我认为如果可以实现在表中搜索匹配项的方法，那将是最好的。

有人实现了它： https ://github.com/meltingice/ajax-chosen

我不是 jQuery 大师，实际上我对此一无所知。 所以请原谅我解释事情的无能方式。 我真的找不到合适的词来描述我的问题。 我只是按照这个简单的指令：添加一个类，放置脚本并调用函数。 一切都很好，除了没有选择输入的页面。 而且我不确定数据是否需要 Ajax 的帮助。 我只能假设表单是从 MySQL 数据库的表中生成的。 选择输入的选项从那里开始。 至少它看起来像我编辑页面时的样子。 因此，当我加载页面时，我在选择输入中只看到“chzn-select”类，这意味着脚本根本不起作用。 阅读相关问题我知道这是因为远程数据源，但我不明白如何解决它。 其实我不太明白你们在说什么。 我尝试了上面提供的 Ajax-chosen 但没有成功，我尝试了这里提到的其他“黑客”。 有人可以用简单的话解释在我的情况下是否可以做某事？

我正在使用 jQuery 1.4.2，在 Mac OS 和 Windows 上都试过。 您可以在此处查看：http: //94.125.8.168/eng/ （单击名为“航班信息”的中心块中的“搜索”或“时间表”选项卡）。 应该选择目的地、航班号和机场。

@ffiona您需要将 Chosen 调用包装在jQuery 就绪函数中。

$(document).ready(function() {
  $(".chzn-select").chosen();
});

请尽量将未来的问题与主题保持一致。 如果您有任何问题，欢迎您打开一个新问题。

@pfiller这是你们正在/或将要开发的功能吗？ 我已经尝试了所有其他 ajax 选择的 hack，但它们都没有真正起作用。 我真的需要这个，因为我正在开发一个用户输入股票代码的证券交易所应用程序，如您所知，它可以拥有数万个股票代码。

@all似乎我从选择中获得 ajax 自动完成的选项将是一个很长的镜头，我可能不得不寻找替代方案。 任何人都可以推荐任何其他替代品来选择 w/此功能？

我最近也创建了一个.. https://github.com/ksykulev/chosen-ajax-addition

@ksykulev你碰巧在某个地方有这个现场演示吗？

@jaequery
只是快速破解了一个示例http://sykulev.com/ajaxchosen/index.html

我在存储库的 /example 下添加了代码。

@ksykulev ：您的版本在单选方面做得非常好，谢谢！ 顺便说一句，它不适用于多选。 如果我有空闲时间，我可能会看看这个。

@meltingice 的版本在multiselect上也确实很奇怪，我认为这是因为它根本不使用 Chosen 函数（所以在原始库中自然解决的所有事情都不在 ajax 版本中，例如输入重新定位并在结果发送回客户端后调整大小）。

@jbbarth ：是的，你是对的，我没有用多选测试它，所以我只能想象它不能很好地工作。 就我的库的完整性而言，我绝对可以添加对这些的支持。 我会加油的。 谢谢！

我最终推出了基于选择的外观和感觉的我自己的版本。

https://github.com/ivaynberg/select2

它支持 ajax/jsonp 远程数据集和无限滚动（分页远程数据集的延迟加载）。 虽然还不支持多选。

@ivaynberg我都在关注这个。

一旦您使用 Chosen（特别是类似标签的多选支持）进行功能模仿，您绝对应该使用此线程。

我喜欢 Chosen 的外观和感觉，但它确实在实施中留下了一些不足之处。

非常非常好的作品！

@ivaynberg我注意到您仍然有选择专门计算下拉和搜索输入宽度的代码。

你可能想看看这个： https ://github.com/harvesthq/chosen/pull/407

我最近更新了我的 ajax 选择版本以支持多选。 http://sykulev.com/ajaxchosen/index.html

@justindujardin Select2 master 现在具有功能奇偶性。 我会看看 407 中的尺寸调整，但我们应该对 Select2 的项目进行进一步讨论。

我非常喜欢Select2 ，我建议每个人都切换到它。 呵呵。

@ProLoser - 谢谢你......正是我想要的。 看起来是一个更好的选择。

选择2 FTW！

Select2是要走的路！

这么多年了，还有更新吗？

为什么缺少这样的 imp 功能？

嗯……好臭。 由于文本突出显示，我决定实施 Chosen，但没有意识到 AJAX 将如此难以添加。 我想如果每个人都从这里跳槽到那里去满足要求，我应该选择 select2。 :(

这是一个很棒的功能。 许多分叉提出了这个功能，但实现往往是混乱的。 :+1:

我想出了一个简单的猴子补丁解决方案：

AbstractChosen.prototype.winnow_results = (function(winnow_results) {
  return function() {
    if (this.options.source) {
      return this.options.source.call(this.form_field, this.search_field.val(), (function(_this) {
        return function(results) {
          var id, option, select;
          if (results) {
            select = document.createElement('select');
            select.appendChild(document.createElement('option'));
            for (id in results) {
              if (results.hasOwnProperty(id)) {
                option = document.createElement('option');
                option.value = id;
                option.textContent = results[id];
                select.appendChild(option);
              }
            }
            _this.results_data = SelectParser.select_to_array(select);
          }
          return winnow_results.call(_this);
        };
      })(this));
    } else {
      return winnow_results.call(this);
    }
  };
})(AbstractChosen.prototype.winnow_results);

您可以为选择的选项提供一个“源”功能选项，该选项将在结果渲染时调用。 它将具有字符串输入值和回调函数参数。 回调函数呈现建议。 如果结果不应该改变，那么你应该立即调用它而不带参数，否则你可以请求结果并在你得到它们时将它们发送到回调。 结果对象具有以下格式： { value: "label", value2: "label2" } 。 这是一个例子：

var select = $("#select"),
    value;
select.chosen({
    source: function (val, callback) {
        if (value != val) {
            value = val;
            $.get('/suggestions', { value: value }, callback);
        } else
            callback();
    }
});

@faucct 的建议似乎有效。 一个小注意事项是，如果您使用的是 jquery 版本，您将无法在所选范围之外访问 AbstractChosen，因此您可能希望将这些文件添加到所选范围内，或者您需要修改所选 js 文件并将 AbstractChosen 和 SelectParser 移动到全局范围。 另一个问题是，它会更新打开列表（选择创建的 div），但不会更新实际的“选择字段”，因此如果选择中不存在您选择的选项，则可能会引发错误。 还有一点需要注意的是，您编写的字符串也用于过滤您返回的结果。 此外，每次您键入内容时它都会起作用，因此您可以手动控制不拨打电话。

我发现另一个扩展是这样的： https ://github.com/meltingice/ajax-chosen

它运行良好，但当前版本已损坏，您进行了一些小修改。 您必须将“chzn”替换为“chosen”，因为所选库已更改其内部 css 名称。 您需要做的最后一个更改是触发“ selected: updated ”而不是“ listz:updated ”。 在自述文件中，它要求您修复 css 中的错误，但它已经在较新的版本中修复，因此您不需要这样做。 您还可以设置一些有用的选项，如果用户继续写入，系统也会取消挂起的呼叫。

这是我的旅程:)，希望它有所帮助。

我已经通过创建一个处理所选远程数据源的插件解决了这个问题，希望大家能喜欢它

选择远程源（https://github.com/westonganger/chosen-remote-source）

整个代码相当简单，不到 200 行代码
https://github.com/westonganger/chosen-remote-source/blob/master/src/chosen-remote-source.js

Chosen 中唯一需要修补的部分如下：

// MONKEY PATCH CHOSEN TO NOT CLEAR THE SELECTED RESULTS UPON SEARCHING WITH
chosen_prototype.show_search_field_default = function() {
  if (this.is_multiple && this.choices_count() < 1 && !this.active_field) {
    this.search_field.val(this.default_text);
    return this.search_field.addClass("default");
  } else {
    if(this.default_text === this.search_field.val()){
      this.search_field.val(""); // ORIGINAL LINE, SURROUNDING IF STATEMENT IS CUSTOM
    }

    return this.search_field.removeClass("default");
  }
};
// END CHOSEN PATCH