14个jQuery 实时搜索插件很难不爱!

  【IT168 资讯】实时搜索是一种增强的搜索表单,它使用AJAX技术在同一视图中提供结果或建议。这是一个常规的HTML输入字段,它通过Chrome、Firefox或Safari等现代浏览器自动完成搜索功能。

  在应用程序中使用实时搜索大大提高了网站的用户友好性。无论使用什么后端技术— PHP、Java、Python、Ruby——JavaScript都是实现客户端实时搜索功能的最佳选择。

  实时搜索一词有点含糊不清,该术语没有权威的定义。我遇到过一些标签为实时搜索的解决方案,但缺乏某些关键功能。

  这是一个开源的实时搜索jQuery插件,具有良好的记录,在Chrome、Firefox、Safari、Opera和IE8中均可完美呈现。 最令人印象深刻的功能是它可以以复制表的形式返回结果!

  如果程序员使用CSS框架,可以考虑Semantic UI。它有一个很酷的搜索组件,使程序员可以很容易地在表单上实现实时搜索。以下是示例代码:

  小但很强大,如果使用API设置选项,可以执行自定义,例如将结果分组。同时,Semantic UI还专为React,Meteor,Ember和Angular设计了不同的风格。

  这是一个jQuery小部件,它是jQuery UI库的一部分。库本身是一组精心设计的用户界面组件,主题是建立在jQuery之上。

  DevBridge jQuery AutoComplete是一个小型JavaScript库,可让将常规文本输入字段转换为自动填充建议框。它的API功能丰富、文档良好,可以执行相当多的不同配置。

  EasyAutocomplete是一个高度可定制的jQuery自动完成插件,具有所有常用的功能。 它支持JSON,XML和纯文本格式的本地和远程数据集。它还支持回调处理程序以及一些默认样式。

  将这个插件分开的是它们的模板功能,模板用于定义结果视图。程序员可以创建自定义模板或使用其中一种可用的内置预设,其中包括:

  这是一个开源的自动完成jQuery插件,您可以用于您的项目。最初该项目团队使用DevBridge的jQuery自动填充功能。后来他们创建了一个fork,并开始更新它以满足自己的需求。最终,他们对原始的源代码进行了多次迭代优化,开源了这款超轻量级优化插件。

  该插件只有1.4 kB压缩,支持多个数据源,回调和智能缓存系统。这是插件的一个示例实现:

  程序员要了解更多信息,可以去官网或Github上查看(github链接:

  这是一个jQuery自动完成插件,它具有高质量的文档、缓存、内存选择、自定义样式、回调处理和WAI-ARIA支持。它需要jQuery v1.4.3或更高版本,并支持所有现代浏览器(甚至IE6!)。

  程序员要了解更多信息,可以去官网或Github上查看(github链接:

  jQuery Typeahead Search是一个自动完成插件,内置深度自定义选项。它适用于所有来自IE8 +的现代浏览器,并支持多种内部和外部AJAX回调。

  该JavaScript库能够在搜索框中添加快速且功能齐全的自动填充菜单,它可以与Algolia搜索引擎结合使用。

  它支持来自IE9的所有现代浏览器,可用作jQuery插件,Angular指令和独立库。除了常规功能,它还具有诸如防止XSS攻击的安全功能。

  它支持模板,本地和远程数据集,以及通常的搜索功能。以下是维基百科搜索的部分代码实现:

  你可以从标题中知道这不是一个jQuery插件,但是它仍然是JavaScript。React Autosuggest是一个具有大量配置选项的开源库。它符合移动设备,符合WAI-ARIA,完全可定制,并且与Redux和Flux完美结合。

  经过恰当的配置,程序员会得到一个真正的搜索插件,这是组件的部分代码示例:

  尽管源文档说明了使用本地阵列进行数据源的解决方案,但可以通过onSuggestionsFetchRequested()函数中的远程提取调用轻松地交换。

  程序员要了解更多信息,可以去官网或Github上查看(github链接:

  如果希望避免依赖并使用纯JavaScript实现解决方案,那么应该尝试使用w3schools提供的解决方案。

  本示例中的后端使用PHP服务器。显然,程序员可以用喜欢的服务器技术来代替。该代码需要XML格式的数据,可以重写代码以接受JSON格式。

  如果使用WordPress,程序员可以使用最少的编码来实现实时搜索。只需要安装和设置具有实时搜索功能的WordPress插件。最受欢迎的是Dave的WordPress Live Search,目前有超过10,000个活动安装。它与大多数主题兼容,具有多种可配置选项,并且易于集成,最小化。

  希望这份清单可以帮助程序员为项目选择合适的实时搜索解决方案。根据您的经验和项目环境,选择比其他环境更容易实现和定制的方案。

相关阅读