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

Question

在 jquery 的 自动完成多值 中，我尝试为所选值添加一个计数器。当我 chose/add 多一个值时，它也应该立即更新。

解决方法的两个代码均无效。

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;
}

或者，如果您认为用户可能会删除最后一个逗号，您也可以拆分 spaces:var words = str.split(' ');。在 spaces 上拆分假设两个值之间至少有一个 space。

确保在任何更改时调用函数：要确保在任何可能的更改时调用checkReceiver()函数，您需要确保它捕获所有事件。捕获 <input> 元素中事件的一种方法是强制检查任何可能的更改。举个例子（方法来自评论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 which is specifically designed for multiple-input autocomplete text entries, and works in a very intuitive manner. For example, with Tokeninput you can use the onAdd and onDelete Callbacks (see here）。使用这些回调，您可以简单地增加 (onAdd) 和减少 (onDelete) 计数器变量。

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

count number of multiple selected in jquery autocomplete field

html

javascript

string

jquery

autocomplete