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

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

focus( event, ui )

Type: autocompletefocus

Triggered when focus is moved to an item (not selecting). The default action is to replace the text field's value with the value of the focused item, though only if the event was triggered by a keyboard interaction.

Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused.

Code examples

Initialize the autocomplete with the focus callback specified:
$( ".selector" ).autocomplete({
    focus: function( event, ui ) {}
});
Bind an event listener to the autocompletefocus event:
$( ".selector" ).on( "autocompletefocus", function( event, ui ) {} );

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

How to keep what was typed in autocomplete

javascript

jquery

jquery-ui

autocomplete

jquery-ui-autocomplete