jquery中live_14个jQuery Live Search插件

jquery中live

实时搜索是一种增强的搜索表单，它使用AJAX技术在同一视图内提供结果或建议。这与常规HTML输入字段不同，常规HTML输入字段从现代浏览器（例如Chrome，Firefox或Safari）获得自动完成功能。 实时搜索通常是一个输入字段，已对其进行编程以从特定数据集中加载建议。

2017年7月6日 ：重写本文以更新插件列表，并包括一些额外的非jQuery库。

在您的应用程序中使用实时搜索可以大大提高站点的用户友好性。无论您使用哪种后端技术（PHP，Java，Python，Ruby），JavaScript都是实现客户端实时搜索功能的最佳选择。

在继续之前，我想指出一下， 实时搜索这个词有点含糊。该术语没有权威性定义。其他常用于表示同一事物的术语是自动完成功能，并在前面键入 。

我遇到了许多标记为实时搜索的解决方案，这些解决方案缺少某些关键功能。对于本文，我将仅列出符合上面定义的实时搜索解决方案。

1. Ajax实时搜索

此列表中的第一个是一个非常了不起的开源实时搜索 jQuery插件。它有据可查，可以在Chrome，Firefox，Safari，Opera和IE8中完美运行。最令人印象深刻的功能是它可以以分页表格的形式返回结果！多么酷啊？

您可以通过以下链接了解更多信息：

网站
资源
下载

2.语义UI搜索组件

如果您喜欢CSS框架，则应该查看Semantic UI 。他们有一个很酷的搜索组件，使您可以轻松地在表单上实现实时搜索 。看看下面的示例代码：

HTML：

<div class="ui search">
<input class="prompt" type="text" placeholder="Search GitHub...">
<div class="results"></div>
</div>

JavaScript：

$('.ui.search')
.search({
apiSettings: {
url: '//api.github.com/search/repositories?q={query}'
},
fields: {
results : 'items',
title   : 'name',
url     : 'html_url'
},
minCharacters : 3
})
;

它极小却功能强大。如果使用API设置选项，则可以进行自定义，例如将结果分组到类别中！

语义UI还具有专门为React，Meteor，Ember和Angular构建的不同风格。查看其集成页面以获取完整列表。

要了解更多信息，请访问以下链接。

下载
文献资料
演示版

3. jQueryUI自动完成

这是jQuery UI库的一部分，是一个jQuery小部件。该库本身是在jQuery之上构建的一组精选的用户界面组件，效果和主题。

自动完成功能带有多个模板，以提供不同的实现。这是一个这样的例子：

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

HTML：

<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds">
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

JavaScript：

$( function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#birds" ).autocomplete({
source: "search.php",
minLength: 2,
select: function( event, ui ) {
log( "Selected: " + ui.item.value + " aka " + ui.item.id );
}
});
} );

要了解更多信息，请访问以下链接：

资源
演示版

4. DevBridge jQuery自动完成

DevBridge jQuery AutoComplete是一个很小JavaScript库，可让您将常规文本输入字段转换为自动完成建议框。它的API丰富且文档齐全，可让您执行许多不同的配置。实现起来非常简单，请查看以下示例：

HTML：

<input type="text" name="country" id="autocomplete"/>

JavaScript（AJAX查找）：

// AJAX Lookup
$('#autocomplete').autocomplete({
serviceUrl: '/autocomplete/countries',
onSelect: function (suggestion) {
alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
}
});

JavaScript（本地查找）：

var countries = [
{ value: 'Andorra', data: 'AD' },
// ...
{ value: 'Zimbabwe', data: 'ZZ' }
];
$('#autocomplete').autocomplete({
lookup: countries,
onSelect: function (suggestion) {
alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
}
});

要了解更多信息，请访问以下链接：

网站

5. EasyAutocomplete

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

该插件与众不同的是其模板功能。模板用于定义结果视图。您可以创建自定义模板或使用可用的内置预设之一，其中包括：

说明模板
图标右/左模板
链接模板

使用此插件实现基本的自动完成非常容易，请参见以下示例代码：

HTML：

<input id="countries"/>

JavaScript：

var options = {
url: "resources/countries.json",
getValue: "name",
list: {
match: {
enabled: true
}
},
theme: "square"
};
$("#countries").easyAutocomplete(options);

JSON：

[
{"name": "Afghanistan", "code": "AF"},
{"name": "Aland Islands", "code": "AX"},
{"name": "Albania", "code": "AL"},
{"name": "Algeria", "code": "DZ"},
{"name": "American Samoa", "code": "AS"}
]

要了解更多信息，请访问以下链接：

网站
下载
资源

6. PixaBay jQuery-自动完成

免费股票网站Pixabay.com，有一个很棒的开源自动完成jQuery插件，可用于您的项目。最初，他们使用的是DevBridge的jQuery Autocomplete（列表中没有4.）。后来，他们创建了一个叉子，并开始对其进行更新以满足自己的需求。最终，他们对原始源代码进行了很多修改，最终使用了自己的超轻量级优化插件。

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

JavaScript：

$('input[name="q"]').autoComplete({
source: function(term, response){
$.getJSON('/some/ajax/url/', { q: term }, function(data){ response(data); });
}
});

要了解更多信息，请访问以下链接：

演示版
资源
下载

7.马可波罗

这是一个jQuery自动完成插件，由于当时缺乏可靠的自动完成插件而无奈开发。它具有质量文档，缓存，内存选择，自定义样式，回调处理和WAI-ARIA支持。它需要jQuery v1.4.3或更高版本，并支持所有现代浏览器（甚至IE6！）。

实施Marco Polo非常简单。这是一个示例实现：

HTML：

...
<head>
<script src="jquery.min.js"></script>
<script src="jquery.marcopolo.min.js"></script>
</head>
...
<body>
<input type="text" name="userSearch" id="userSearch">
</body>

JavaScript：

$('#userSearch').marcoPolo({
url: '/users/search',
formatItem: function (data, $item) {
return data.first_name + ' ' + data.last_name;
},
onSelect: function (data, $item) {
window.location = data.profile_url;
}
});

JSON（源数据）：

[
{
"first_name": "James",
"last_name": "Butler",
"profile_url": "/users/78749",
},
{
"first_name": "Win",
"last_name": "Butler",
"profile_url": "/users/41480",
},
]

要了解更多信息，请访问以下链接：

资源
演示版

8.像Google一样的xDSoft自动完成功能

这是一个轻量级的自动完成jQuery插件，具有本地和远程数据源支持。它具有重音折叠功能。

这是示例代码实现：

JavaScript

$('#remote_input2').autocomplete({source:[
{
url:"/component/jquery_plugins/?task=demodata&q=%QUERY%",
type:'remote'
},
["One","Two","Three"]
]});

要了解更多信息，请访问以下链接：

网站
下载
资源

9. jQuery Typeahead搜索

jQuery Typeahead Search是使用深度定制选项构建的自动完成插件。它适用于IE8 +的所有现代浏览器，并支持多个内部和外部AJAX回调。

如果您查看了演示页面，您将找到许多不同代码实现的示例。

网站
演示版
下载

10.阿尔及利亚自动完成

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

它支持IE9中的所有现代浏览器，并且可以作为jQuery插件，Angular指令和独立库使用。除了通常的功能外，它还具有安全功能，例如，针对XSS攻击的防护。

资源
下载

11. ng-bootstrap提前输入

如果在项目中同时使用Angular和Bootstrap，则应使用ng-bootstrap框架。它具有一个Typeahead组件，其功能与常规jQuery自动完成插件一样。

它支持模板，本地和远程数据集以及通常的实时搜索功能。这是Wikipedia搜索的部分代码实现：

HTML：

<div class="form-group" [class.has-danger]="searchFailed">
<label for="typeahead-http">Search for a wiki page:</label>
<input id="typeahead-http" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" placeholder="Wikipedia search" />
<span *ngIf="searching">searching...</span>
<div class="form-control-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
</div>

打字稿：

@Injectable()
export class WikipediaService {
constructor(private _jsonp: Jsonp) {}
search(term: string) {
if (term === '') {
return Observable.of([]);
}
let wikiUrl = 'https://en.wikipedia.org/w/api.php';
let params = new URLSearchParams();
params.set('search', term);
params.set('action', 'opensearch');
params.set('format', 'json');
params.set('callback', 'JSONP_CALLBACK');
return this._jsonp
.get(wikiUrl, {search: params})
.map(response => <string[]> response.json()[1]);
}
}
@Component({
selector: 'ngbd-typeahead-http',
templateUrl: './typeahead-http.html',
providers: [WikipediaService],
styles: [`.form-control { width: 300px; display: inline; }`]
})
export class NgbdTypeaheadHttp {
model: any;
searching = false;
searchFailed = false;
constructor(private _service: WikipediaService) {}
search = (text$: Observable<string>) =>
text$
.debounceTime(300)
.distinctUntilChanged()
.do(() => this.searching = true)
.switchMap(term =>
this._service.search(term)
.do(() => this.searchFailed = false)
.catch(() => {
this.searchFailed = true;
return Observable.of([]);
}))
.do(() => this.searching = false);
}

要了解更多信息，请访问以下链接：

文献资料
下载

12.React自动建议

您可以从标题中看出这不是jQuery插件，但是它是JavaScript。 React Autosuggest是一个开源库，具有大量配置选项。它是移动友好的，兼容WAI-ARIA的，完全可定制的，并且与Redux和Flux很好地集成在一起。

进行设置需要花费一些精力，但是一旦完成，您将获得一个实时搜索插件，该插件的行为完全符合您的期望。这是该组件的部分代码示例：

return (
<Autosuggest
suggestions={suggestions}
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
getSuggestionValue={getSuggestionValue}
renderSuggestion={renderSuggestion}
inputProps={inputProps}
/>
);

尽管源文档说明了使用本地数组作为数据源的解决方案，但是您可以通过onSuggestionsFetchRequested()函数内的远程访onSuggestionsFetchRequested()调用轻松交换该解决方案。

要了解更多信息，请访问以下链接：

网站
资源

13. W3Schools Ajax实时搜索

如果您希望避免依赖关系并使用纯JavaScript实现解决方案，则应尝试使用w3schools.com提供的解决方案。

本示例中使用的后端使用的是PHP服务器。显然，您可以用您选择的服务器技术替代它。该代码需要XML格式的数据。您也可以重构代码以接受JSON格式。

此解决方案的最大优点是，它可以与所有现代浏览器以及IE5以下的旧浏览器一起使用！

HTML：

<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>

JavaScript：

function showResult(str) {
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {  // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("livesearch").innerHTML=this.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}

要了解更多信息，请访问以下链接：

来源+演示

14. WordPress实时搜索

如果您使用的是WordPress，您将很高兴知道您可以以最少的编码甚至根本不需要编码的方式实现实时搜索 。您所需要做的就是安装和设置具有实时搜索功能的WordPress插件。最受欢迎的是Dave的WordPress实时搜索，目前具有10,000多个有效安装。它与大多数主题兼容，带有几个可配置的选项，并且易于集成，而不必花太多时间。它还带有YouTube教程，该教程演示了整个设置过程。

要了解更多信息，请访问以下链接：

下载
文献资料

摘要

我希望此列表可以帮助您为项目选择合适的实时搜索解决方案。根据您的经验和项目环境，某些工具比其他工具更易于实现和自定义。

我还没有列出其他功能强大的解决方案。也许您可以通过在下面的评论中列出它们来提供帮助。

翻译自: https://www.sitepoint.com/14-jquery-live-search-plugins/

jquery中live