执行 keyup 或 keydown 时，文本框获取值而不是 jQuery 自动完成的标签答案

【问题标题】：when doing keyup or keydown, textbox gets value instead of label for jQuery autocomplete执行 keyup 或 keydown 时，文本框获取值而不是 jQuery 自动完成的标签
【发布时间】：2015-05-05 02:05:49
【问题描述】：

这让我快疯了。我到处搜索，但似乎没有一个解决方案有效。

自动完成功能正常，所有标签值都正确加载到自动完成下拉菜单中。我可以用鼠标选择任何标签值，并且相同的值进入文本框。但是当我使用 keyup 或 keydown 来选择标签时，文本框会获取值而不是标签。例如，有了这些数据，

[{"label":"Tom Smith","value":"1234"},{"label":"Tommy Smith","value":"12321"}]

如果我选择“Tom Smith”，则在 keydown 上，文本框将获得值“1234”。

我的自动完成代码如下所示：

 $('.autocompleteEval').autocomplete({
    source: '@Url.Action("autocompleteEvalList")',
    minLength: 2,

    select: function (event, ui) {
        debugger;
        event.preventDefault();
        $(this).val(ui.item.label);

        if (ui.item.value == "-1") {
            $('.autocompleteEval').val('');
            $('#EvaluatorAjax').hide();
        }
        else {
            $('.autocompleteEval').val(ui.item.label);
            $('#EvaluatorAjax').hide();
        }
        event.preventDefault();
        return false;
    }
    , change: function (event, ui) {
        if (!ui.item) {
            $('.autocompleteEval').val('');
        }
        else {
            $('.autocompleteEval').val(ui.item.label);
            $(this).attr('actionId', ui.item.values);
            $('#EvaluatorAjax').hide();
        }
    }

    , search: function (event, ui) {
        $('#EvaluatorAjax').css('visibility', '');
    }

    , response: function (event, ui) {
        $('#EvaluatorAjax').css('visibility', 'hidden');
    }

}).focus(function (event, ui) {
    event.preventDefault();        
    $('.autocompleteEval').val(ui.item.label);
    return false;
});

非常感谢任何帮助/建议（可能将按键事件连接到自动完成，不确定）非常感谢

谢谢

【问题讨论】：

你能做一个 jsfiddle 或者发布你的 HTML 吗？
感谢您解决问题。无论如何，我得到了它的工作。

标签： javascript jquery autocomplete

【解决方案1】：

这就是我让它工作的方式。不知何故错过了 jQuery API .keyup() 和 .keydown() 函数。我希望这对其他人有所帮助

html 代码如下所示 - <input class="autocompleteEval ui-autocomplete-input" id=txtEvaluator/>

解析后的代码如下所示。

$('.autocompleteEval').autocomplete({
 source: '@Url.Action("autocompleteEvalList")',
 minLength: 2,

select: function (event, ui) {
    debugger;
    event.preventDefault();
    $(this).val(ui.item.label);

    if (ui.item.value == "-1") {
        $('.autocompleteEval').val('');
        $('#EvaluatorAjax').hide();
    }
    else {
        $('.autocompleteEval').val(ui.item.label);
        $('#EvaluatorAjax').hide();
    }
    event.preventDefault();
    return false;
}
, change: function (event, ui) {
    if (!ui.item) {
        $('.autocompleteEval').val('');
    }
    else {
        $('.autocompleteEval').val(ui.item.label);
        $(this).attr('actionId', ui.item.values);
        $('#EvaluatorAjax').hide();
    }
}

, search: function (event, ui) {
    $('#EvaluatorAjax').css('visibility', '');
}

, response: function (event, ui) {
    $('#EvaluatorAjax').css('visibility', 'hidden');
}

}).keyup(function (event, ui) {
    if (ui.item.value == "-1") {
        $('.autocompleteEval').val('');
    }
    else {
        $('.autocompleteEval').val(ui.item.label);
    }
    return false;
}).keydown(function (event, ui) {
    if (ui.item.value == "-1") {
        $('.autocompleteEval').val('');
    }
    else {
        $('.autocompleteEval').val(ui.item.label);
    }
    return false;
}).focus(function (event, ui) {
    event.preventDefault();        
    $('.autocompleteEval').val(ui.item.label);
    return false;
});

【讨论】：