在jquery自动完成字段中选择的倍数的计数

count number of multiple selected in jquery autocomplete field

本文关键字：选择 字段 jquery      更新时间：2023-09-26

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

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

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;

有没有触发器，我可以直接在自动完成函数中使用？

jsfiddle 上的演示

您已经非常接近工作解决方案。我建议进行以下更改：

不测试regex，只需在逗号上拆分：您使用的插件会在每个新选择的值后自动添加一个逗号。因此，您可以简单地通过逗号的数量来计算值的数量。例如：

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>元素中事件的一种方法是强制检查任何可能的更改。举个例子（这个答案中的注释方法）：

    <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
       }, ...

有了这些更改，程序就能按预期运行。请参阅这个jsFiddle。

我还可以建议您看看jQuery Tokeninput，它是专门为多个输入自动完成文本条目设计的，工作方式非常直观。例如，使用Tokeninput，您可以使用onAdd和onDelete回调（请参阅此处）。使用这些回调，您可以简单地增加（onAdd）和减少（onDelete）计数器变量。

相关文章：