在文本框jQuery用户界面自动完成多值 [英] jQuery UI Autocomplete Multiple Values in Textbox
问题描述
我需要一个简单的自动完成搜索功能，也让用户键入多个值。我使用jQuery UI的自动完成构件（ http://jqueryui.com/autocomplete/ ），至今我给自己定源仅搜索在建议的第一个字母。我现在想补充的是，以搜索来自同一个文本框的多个项目的能力，为用户。的（即后一个逗号建议再次显示。）的
我一直在试图就如何可以这样做搜索。我已经成功地找到的唯一的事情是可以添加多个选项：真正的（ http://forum.jquery.com/topic/multiple-values-with-autocomplete ）。事情是，它甚至没有在文件中，上市了，所以我不知道，如果该选项已经改变已经不存在了。
这是我的code：
VAR项目= ['法国'，'意大利'，'马耳他'，'英格兰'，
澳大利亚，西班牙，苏格兰']; $（文件）。就绪（函数（）{
$（'＃搜索'）。自动完成（{
来源：功能（REQ，responseFn）{
VAR重= $ .ui.autocomplete.escapeRegex（req.term）;
VAR匹配=新的RegExp（'^'+重，'我'）;
风险价值= $ .grep（项功能（项指数）{
返回matcher.test（项目）;
}）;
responseFn（一）;
}
}）;
}）;
我试过：
VAR项目= ['法国'，'意大利'，'马耳他'，'英格兰'，
澳大利亚，西班牙，苏格兰']; $（文件）。就绪（函数（）{
$（'＃搜索'）。自动完成（{
来源：功能（REQ，responseFn）{
VAR重= $ .ui.autocomplete.escapeRegex（req.term）;
VAR匹配=新的RegExp（'^'+重，'我'）;
风险价值= $ .grep（项功能（项指数）{
返回matcher.test（项目）;
}）;
responseFn（一）;
}，
多：真
}）;
}）;
要解决多个字符串的问题在同一个文本框，并包括一个正则表达式，只显示相匹配的建议我做了以下字符串的开头：
$（'＃搜索'）。自动完成（{
的minLength：1，
来源：函数（请求，响应）{
VAR长期= request.term; //新的字符串的子串（仅当一个逗号是字符串）
如果（term.indexOf（，）大于0）{
变种指数= term.lastIndexOf（，）;
长期= term.substring（索引+ 2）;
} //正则表达式匹配字符串的建议开始输入的字符串
VAR重= $ .ui.autocomplete.escapeRegex（项）;
VAR匹配=新的RegExp（'^'+重，'我'）;
VAR regex_validated_array = $ .grep（项功能（项指数）{
返回matcher.test（项目）;
}）; //通过阵列``regex_validated_array的反应和
//`extractLast（）`这需要逗号分隔的护理 响应（$。ui.autocomplete.filter（regex_validated_array，
extractLast（长期）））;
}，
重点：函数（）{
返回false;
}，
选择：函数（事件，UI）{
VAR而言=拆分（THIS.VALUE）;
terms.pop（）;
terms.push（ui.item.value）;
terms.push（''）;
THIS.VALUE = terms.join（，）;
返回false;
}
}）; 函数split（VAL）{
返回val.split（/ \\ S * /）;
} 功能extractLast（项）{
返回拆分（项）.pop（）;
}
I need a simple autocomplete search functionality but also allowing users to type more than one value. I'm using jQuery UI's autocomplete widget (http://jqueryui.com/autocomplete/) and so far I've set the source to only search for the first letter in the suggestions. What I'd like to add now is the ability for users to search for multiple items from the same textbox. (i.e. after a comma suggestions are shown again)
I have been trying to search on how this could be done. The only thing I've managed to find is an option that could be added multiple: true (http://forum.jquery.com/topic/multiple-values-with-autocomplete). Thing is that it's not even listed in the documentation anymore so I don't know if the option has changed or doesn't exist anymore.
This is my code:
var items = [ 'France', 'Italy', 'Malta', 'England',
'Australia', 'Spain', 'Scotland' ];
$(document).ready(function () {
$('#search').autocomplete({
source: function (req, responseFn) {
var re = $.ui.autocomplete.escapeRegex(req.term);
var matcher = new RegExp('^' + re, 'i');
var a = $.grep(items, function (item, index) {
return matcher.test(item);
});
responseFn(a);
}
});
});
What I tried:
var items = [ 'France', 'Italy', 'Malta', 'England',
'Australia', 'Spain', 'Scotland' ];
$(document).ready(function () {
$('#search').autocomplete({
source: function (req, responseFn) {
var re = $.ui.autocomplete.escapeRegex(req.term);
var matcher = new RegExp('^' + re, 'i');
var a = $.grep(items, function (item, index) {
return matcher.test(item);
});
responseFn(a);
},
multiple: true
});
});
To solve the issue of multiple strings in the same textbox AND include a regex to only show suggestions matching the start of the string I did the following:
$('#search').autocomplete({
minLength: 1,
source: function (request, response) {
var term = request.term;
// substring of new string (only when a comma is in string)
if (term.indexOf(', ') > 0) {
var index = term.lastIndexOf(', ');
term = term.substring(index + 2);
}
// regex to match string entered with start of suggestion strings
var re = $.ui.autocomplete.escapeRegex(term);
var matcher = new RegExp('^' + re, 'i');
var regex_validated_array = $.grep(items, function (item, index) {
return matcher.test(item);
});
// pass array `regex_validated_array ` to the response and
// `extractLast()` which takes care of the comma separation
response($.ui.autocomplete.filter(regex_validated_array,
extractLast(term)));
},
focus: function () {
return false;
},
select: function (event, ui) {
var terms = split(this.value);
terms.pop();
terms.push(ui.item.value);
terms.push('');
this.value = terms.join(', ');
return false;
}
});
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
这篇关于在文本框jQuery用户界面自动完成多值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
