计算 jquery 自动完成字段中选择的多个数

Question

在 jquery 的 autocomplete multiple value 中，我尝试为选定的值添加一个计数器。当我选择/添加更多值时，它也应该立即更新。

解决方法的两个代码都不起作用。

1

function checkReceiver()
{
var str = document.forms[0].tags.value,
regex = /417/igm,
count = str.match(regex),
count = (count) ? count.length : 0;
console.log(count);
document.forms[0].receiver.value=count;
}

2

var str = document.forms[0].tags.value;
count = (str.match(/417/g) || []).length;
document.forms[0].receiver.value=count;

有没有触发器，可以直接在自动补全功能中使用？

Demo on jsfiddle

Answer 1

您已经非常接近工作解决方案了。我提出以下更改：

不用测试正则表达式，只需用逗号分开：您使用的插件会在每个新选择的值之后自动放置一个逗号。因此，您可以简单地通过逗号数来计算值的数量。举个例子：

function checkReceiver() {
    var str = document.forms[0].tags.value; 
    var words = str.split(',');                   // split on commas
    var count = words.length - 1;                 // a correction for the first element
    document.forms[0].receiver.value = count;
}

或者，如果您认为用户可能会删除最后一个逗号，您也可以按空格分隔：var words = str.split(' ');。空格分割假定两个值之间至少有一个空格。

确保在任何更改时调用该函数：要确保在任何可能的更改时调用 checkReceiver() 函数，您需要确保它捕获所有事件。在<input> 元素中捕获事件的一种方法是强制检查任何可能的更改。举个例子（来自 cmets in this answer 的方法）：

    <input type="text" name="numbers" id="tags" class="input_text clearable" size="50"
    onchange="checkReceiver();" 
    onkeypress="this.onchange();" 
    onpaste="this.onchange();" 
    oninput="this.onchange();" 
    placeholder="Choose Receiver" tabindex="1" value="" autofocus>

此外，您还想在自动完成列表关闭时调用checkReceiver()。因此：

    .autocomplete({
       close: function(event, ui) {
          checkReceiver();                        // call checkReceiver() upon close
       }, ...

完成这些更改后，程序按预期运行。请参阅 this jsFiddle。

我还可以建议您查看jQuery Tokeninput，它专为多输入自动完成文本条目而设计，并且以非常直观的方式工作。例如，通过 Tokeninput，您可以使用 onAdd 和 onDelete 回调 (see here)。通过这些回调，您可以简单地增加 (onAdd) 和减少 (onDelete) 计数器变量。