如何保留在自动完成中输入的内容

Question

我正在使用 Javascript 自动完成小部件，它会在我键入时正确显示建议列表，但是当我按下向下键浏览列表时，我当前的输入被删除。

SERVIÇO OU PRODUTO 是占位符。

虽然这不是我的确切问题，但 jsfiddle 应该可以证明问题所在。输入一个字母并按下向下键后，它会将我的输入替换为所选内容。

这是我的代码：

$.widget('custom.mcautocomplete', $.ui.autocomplete, {
    _create: function() {
        this._super();
    },
    _renderItem: function(ul, item) {
        var t = '',
            result = '';

        $.each(this.options.columns, function() {
            t = '<span>' + item[0] + ' - R$ ' + item[1] + '</span>';
        });

        result = $('<li></li>')
            .data(item)
            .append(t)
            .appendTo(ul);
        return result;
    }
});

$("#my-input").mcautocomplete({
    columns: my-columns,
    source: my-info,
    select: function(event, ui) {
        this.value = (ui.item[0]);
        return false;
    }
});

Answer 1

你必须取消焦点事件：

focus: function(event, ui) {
    event.preventDefault();
}

Working demo on jsfiddle

您提供的jsfiddle 确实取消了该事件，但随后使用此命令立即取消了它自己的操作：

$("#customer-search").val(ui.item.label);

见Autocomplete Widget - event - focus

焦点（事件，用户界面）

类型：自动完成对焦

当焦点移动到一个项目（不是选择）时触发。默认操作是将文本字段的值替换为焦点项的值，但前提是事件是由键盘交互触发的。

取消此事件会阻止值被更新，但不会阻止菜单项获得焦点。

代码示例

使用指定的焦点回调初始化自动完成：

$( ".selector" ).autocomplete({
    focus: function( event, ui ) {}
});

将事件监听器绑定到 autocompletefocus 事件：

$( ".selector" ).on( "autocompletefocus", function( event, ui ) {} );