不属于 jQuery UI 的良好 jQuery 自动完成功能？答案

【问题标题】：Good jQuery Autocomplete that is not part of jQuery UI?不属于 jQuery UI 的良好 jQuery 自动完成功能？
【发布时间】：2018-04-13 23:02:41
【问题描述】：

jQuery UI 自动完成功能有什么好的替代品吗？

我在互联网上找不到。 jQuery UI 对于仅使用自动完成功能来说太大了，我不想自己再推出另一个自动完成功能。

答案：仅用于自动完成的 jQuery UI 自定义构建是 23,052 字节。 SO uses 原来的 Zaefferer version 被改编成 jQuery UI 自动完成。我想如果它对 SO 来说足够好，它对我来说已经足够好了，它是从 GitHub 上的agarzola 分叉出来的。

【问题讨论】：

可能重复：stackoverflow.com/questions/188442/…。即使实际问题有点不同，至少会给出（一些）相同的答案。
缩小的自定义构建有多大？
我同意@Aleksi - 自定义构建后是 20kb
我会将您的编辑列为答案。 Zaefferer 的插件为 14,157 字节，在大小方面比 jQuery UI（20,231 字节）高出 30%。

标签： javascript jquery autocomplete

【解决方案1】：

Google 搜索“jquery autocomplete”产生了这个 DevBridge 一个（以及所有其他）：

http://www.devbridge.com/projects/autocomplete/jquery/

这也是possible duplicate of this question 中获得最高评价的未接受答案。

【讨论】：

缩小了 7,187 个字节。非常好！
迄今为止最好的。我建议的第二个是tomcoote.co.uk/code-bank/jquery-json-suggestsearch-box

【解决方案2】：

您可以从 http://jqueryui.com/download 下载包含所需组件的自定义 jQuery UI 版本。点击取消选择所有组件，然后点击自动完成旁边的复选框。压缩后的 js 文件是 20 KB 未压缩。

【讨论】：

我的 mac(hine) 上的 23,052 字节。核心（4 个文件）+ 自动完成。非 gzip 压缩。
听起来您正在使用development-bundle 文件夹中的文件？ js 文件夹中的文件 jquery-ui-x.x.xx.custom.min.js 应该在一个文件中包含您需要的所有内容。

【解决方案3】：

jQuery 官方插件：

http://docs.jquery.com/Plugins/autocomplete

Select2 jQuery 插件，将选择变成自动完成输入+列表：

http://ivaynberg.github.io/select2/

选择的 jQuery 插件，同样的东西，但来自不同的作者：

http://harvesthq.github.io/chosen/

Jörn Zaefferer jQuery 插件：

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

雅虎YUI：

http://developer.yahoo.com/yui/autocomplete/

Selectize.js（基于 jQuery）：

https://selectize.github.io/selectize.js/

Twitter 预输入：

https://twitter.github.io/typeahead.js/

【讨论】：

我检查了此页面上的每个链接，我认为 Select2 是最好的选择。
@Kareem 这是一个口味问题，我经常更喜欢使用非基于 jquery 的库（vanilla js 更轻量级和快速），我认为这就是 Twitter Typeahead 的情况（我编辑了答案以添加 selectize并提前输入）

【解决方案4】：

见https://github.com/agarzola/jQueryAutocompletePlugin/blob/master/jquery.autocomplete.js

【讨论】：

【解决方案5】：

您可以下载仅包含自动完成模块的自定义 jQuery UI 版本： http://jqueryui.com/download

【讨论】：

【解决方案6】：

3 岁的问题，但由于它在“最佳 jquery-ui 自动完成替代”的 Google 结果中排名第二，我认为值得在此处放置一个链接以用于 twitter 的 Typeahead 实施：http://twitter.github.io/typeahead.js/

有点烦人，您可能需要 Hogan 模板引擎才能使其工作（增加更多 kb 的负载），但如果您花时间阅读文档，那将是值得的.

在阅读文档 30 分钟后，我用下面的（简化的）代码结构替换了我的“位置查找”jquery UI 实现：

$('.location_text_field').typeahead({

    name : 'locations',
    remote : {
        url : "/get_locations.php",
        filter : function (response) {
            return response.locations;
        }
    },
    template : '<p>{{{label}}}</p>',
    engine : Hogan

}).on({

    // When the user selects a location do something clever
    'typeahead:selected' : function (e, datum) {
       // Doing something clever here....
    },

    // Reset the cleverness above if the user changed
    // the text of the field manually on his own
    'keyup' : function () {
         // Reset cleverness
    }

});

...它就像一个魅力。

【讨论】：

【解决方案7】：

我自己只是在寻找替代品，结果发现了这个

https://github.com/onigoetz/jquery.autocomplete

它使用 jQuery，但不使用 jQuery UI。它具有大小意识，并且与 jQuery UI 兼容。它在 github 上“来自 agarzola/jQueryAutocompletePlugin”。

它可能没有众所周知的 jQuery UI 实现的支持，但我对其进行了测试，现在它似乎是所有广告。

【讨论】：

404 页面未找到