使用多个数据集在jQuery自动完成中使用多个触发器 [英] use multiple triggers in jQuery autocomplete using mutiple datasets
本文介绍了使用多个数据集在jQuery自动完成中使用多个触发器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在textarea上实现twitter/facebook之类的自动完成功能.现在，直到现在我已经为单个触发器"@"实现了它.但我希望它可用于2个触发器"@"和#". 两者将具有不同的数据集.
I am trying to implement twitter/facebook like auto-complete on a textarea. Now Till now i have implemented it for single trigger "@". But I want it to work for 2 triggers "@" and "#". Both will have different data sets.
这里是单个数据集.这个很完美.
Here is for the single dataset. This one works perfectly.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<textarea class="searchBox" cols="20" rows="10"></textarea>
</body>
</html>
JS
var triggered = false; // By default trigger is off
var trigger = "@"; // Defining the trigger
var data = [
{
label: "abc",
value: "abc@live.com"
},
{
label: "def",
value: "deg@altman.com"
},
{
label: "ghf",
value: "sds@lane.com"
}
];
$(".searchBox").autocomplete({
minLength: 0,
source: data,
search: function () {
if (!triggered) {
return false;
}
},
select: function (event, ui){
var text = this.value;
var pos = text.lastIndexOf(trigger);
this.value = text.substring(0, pos) + ui.item.value;
triggered = false;
return false;
},
focus: function () {
return false;
}
}).data( "ui-autocomplete" )._renderItem = function (ul, item) {
return $("<li>")
.append("<a>" + "<b>" + item.label + "</b> " + item.value + "</a>")
.appendTo(ul);
};
$('.searchBox').keyup(function (e) {
if (e.keyCode == 38 || e.keyCode == 40) {
return;
}
var text = this.value;
var len = text.length;
var last;
var query;
var index;
if (triggered) {
index = text.lastIndexOf(trigger);
query = text.substring(index + trigger.length);
$(this).autocomplete("search",query);
} else if (len >= trigger.length) {
last = text.substring(len - trigger.length);
triggered = (last === trigger);
}
});
这是小提琴: http://jsbin.com/qakefini/7/edit
现在我尝试了2个触发器:
Now what i tried for 2 triggers :
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<textarea class="searchBox" cols="20" rows="10"></textarea>
</body>
</html>
JS
var triggered = false;
var trigger1 = "@";
var trigger2 = "#"; // Defining the trigger
var trigger = "@";
var data1 = [
{
label: "abc",
value: "abc@live.com"
},
{
label: "def",
value: "deg@altman.com"
},
{
label: "ghf",
value: "sds@lane.com"
}
];
var data2 = [
{
tag: "what"
},
{
tag: "hello"
},
{
tag: "there"
}
];
var data = jQuery.extend(true, {}, data1);
$(".searchBox").autocomplete({
minLength: 0,
source: data,
search: function () {
if (!triggered) {
return false;
}
},
select: function (event, ui){
var text = this.value;
var pos = text.lastIndexOf(trigger);
this.value = text.substring(0, pos) + ui.item.value;
triggered = false;
return false;
},
focus: function () {
return false;
}
}).data( "ui-autocomplete" )._renderItem = function (ul, item) {
return $("<li>")
.append("<a>" + "<b>" + item.label + "</b>" + item.value + "</a>")
.appendTo(ul);
};
$(".searchBox").keypress(function (e) {
if (e.charCode != 64 && e.charCode != 35) {
return;
}
if (e.charCode == 64) {
trigger = trigger1;
data = jQuery.extend(true, {}, data1);
}
else if (e.charCode == 35 ){
trigger = trigger2;
data = jQuery.extend(true, {}, data2);
}
});
$(".searchBox").autocomplete({
minLength: 0,
source: data,
search: function () {
if (!triggered) {
return false;
}
},
select: function (event, ui){
var text = this.value;
var pos = text.lastIndexOf(trigger);
this.value = text.substring(0, pos) + ui.item.value;
triggered = false;
return false;
},
focus: function () {
return false;
}
}).data( "ui-autocomplete" )._renderItem = function (ul, item) {
return $("<li>")
.append("<a>" + "<b>" + item.label + "</b> " + item.value + "</a>")
.appendTo(ul);
};
$('.searchBox').keyup(function (e) {
if (e.keyCode == 38 || e.keyCode == 40) {
return;
}
var text = this.value;
var len = text.length;
var last;
var query;
var index;
if (triggered) {
index = text.lastIndexOf(trigger);
query = text.substring(index + trigger.length);
$(this).autocomplete("search",query);
} else if (len >= trigger.length) {
last = text.substring(len - trigger.length);
triggered = (last === trigger);
}
});
这是小提琴: http://jsbin.com/qakefini/22/edit
它不响应搜索查询.哪里出了问题? 请帮忙. 谢谢. 问候.
It is not responding to the search queries. Where it is going wrong ? Please help. Thanks. regards.
推荐答案
在第二个示例中，您有两个数组data1和data2，但是您要告诉.autocomplete()数据源是source: data)-未定义.
In your second example, you have two arrays data1 and data2, yet you're telling the .autocomplete() that the data source is data (the line reads: source: data) - which is undefined.
这篇关于使用多个数据集在jQuery自动完成中使用多个触发器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
