Question

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

是否有触发器，我可以直接在自动完成功能中使用？

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>元素中事件的一种方法是强制检查任何可能的更改。作为示例（来自评论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 ）计数器变量。

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

1 个答案: