Javascript jquery自动完成：完成后获取“新”值

我有一个jquery自动完成文本框multiple:true，用于设置项目的类别，与stackoverflow标记非常相似

自动完成源是一个对象列表，覆盖formatItem以进行正确显示

我要做的是从中提取两个列表：一个是所选类别ID的列表，一个是整数数组，另一个是他们输入的不在原始列表中的任何新类别的列表。这就是我所尝试的：

var categories = [];
var newCategoryNames = [];

var collectData = function(event, itemData, formatted) {
    if (itemData == null)
    {
        // no match -- new category
        newCategoryNames[newCategoryNames.length] = formatted;
    }
    else
    {
        categories[categories.length] = itemData.iCategoryID;
    }
};
$('#txtCategories').result(collectData).search().unbind('result');

这对于预先存在的categories else子句很有效，但对于新的items if子句无效。这是因为在这种情况下，不仅itemData以null形式传递，而且格式化参数也是null。我原以为当用户输入文本时，它仍然会被传入，但显然不是

---

那我该怎么办？对不匹配项调用该回调，但它似乎没有提供任何信息来告诉我该不匹配项实际上是什么。

最坏的情况是，您应该能够自己从输入中提取值：

if (itemData == null)
{
    // no match -- new category
    newCategoryNames[newCategoryNames.length] = event.target.value;
}

---

当“multiple”设置为true并且用户键入了不属于现有列表的条目时，您如何能够获取要触发的“result”事件？在我的测试页面中，我无法做到这一点

无论如何，我通过autocomplete插件源代码进行了调试，发现它无法处理“multiple=true”、“mustmatch=false”和用户类型不属于autocomplete列表的条目的情况

以下是调试信息：

有一个代码可以检查用户按下的键，如果是逗号或多重分隔符，则会触发 选择当前方法

        // matches also semicolon
        case options.multiple && $.trim(options.multipleSeparator) == "," && KEY.COMMA:
        case KEY.TAB:
        case KEY.RETURN:
            if( selectCurrent() ) {
                // stop default to prevent a form submit, Opera needs special handling
                event.preventDefault();
                blockSubmit = true;
                return false;
            }
            break;

这就是selectCurrent方法的外观。它尝试获取当前选定的值。 这里的选择对象是插件创建的“自动完成”下拉列表。 如果用户输入了一个不属于列表的单词，它将返回false，并且不会触发“result”事件

function selectCurrent() {
    var selected = select.selected();

    if( !selected ) //selected is NULL if user types in comma after typing a word which doesn't belong in the list. And that is why I was surprised that your result event was even triggered.
        return false;

    var v = selected.result;
    previousValue = v;

    if ( options.multiple ) {
        var words = trimWords($input.val());
        if ( words.length > 1 ) {
            v = words.slice(0, words.length - 1).join( options.multipleSeparator ) + options.multipleSeparator + v;
        }
        v += options.multipleSeparator;
    }

    $input.val(v);
    hideResultsNow();
    $input.trigger("result", [selected.data, selected.value]);
    return true;
}

要解决此问题，您应该检查options.multiple。下面是最终的代码，它将做正确的事情：

function getLastWord()
{
    var words = trimWords($input.val());
    return words[words.length - 1];
};

function selectCurrent() {
    var selected = select.selected();

    //options.multiple BUGFIX START

    //We don't have to check for options.mustMatch because the 'select' component
    //already handles it.
    if(! selected && options.multiple)
    {
        var lastWord = getLastWord();
        //Below code is similar to how the Cache component generates the data.
        selected = {
                        data : lastWord,                            
                        value : options.formatMatch(lastWord, -1, options.data.length),
                        result : options.formatResult && options.formatResult(lastWord) || lastWord

        };
    }
    //options.multiple BUGFIX END

    if( !selected )
        return false;

    var v = selected.result;
    previousValue = v;

    if ( options.multiple ) {
        var words = trimWords($input.val());
        if ( words.length > 1 ) {
            v = words.slice(0, words.length - 1).join( options.multipleSeparator ) + options.multipleSeparator + v;
        }
        v += options.multipleSeparator;
    }

    $input.val(v);
    hideResultsNow();
    $input.trigger("result", [selected.data, selected.value]);
    return true;
}

---

因此，您可以修改您的Autocomplete插件版本，或者获取文本框的值，然后自己进行解析。

1在我的例子中，您将如何获取选定项的Id，或者在选择后显示在文本框中。Id不应该显示在所选列表中，它应该从后面附加到每个列表值。

---

2 jquery autocomplete是否包含多列列表结构，例如：I want:ItemCode、Name、Desc，其中搜索基于项目代码。

不幸的是，event.target.value仅包含文本框的全部内容。如果我要使用它，我可以完全绕过所有这些代码并尝试拆分$'txtbox'.val；但是我希望使用自动完成中已经存在的代码在显示值和ID之间进行映射。我最终只是解析了我自己，实际上只是在分隔字符上进行拆分，然后在列表中搜索字符串。但是谢谢，这很有趣