如何保留自动填充中输入的内容

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

  

焦点（事件，用户界面）

     

输入：autocompletefocus

     

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

     

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

     

代码示例

     

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

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

     

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

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