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

罗德里戈·博尼亚蒂(Rodrigo Boniatti)

我正在使用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;
    }
});
花费

您必须取消焦点事件:

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

在jsfiddle上工作的演示

您提供jsfiddle确实取消了该事件,但是随后使用以下命令立即将其自身的动作无效:

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

请参阅自动完成小部件-事件-焦点

焦点(事件,用户界面)

类型:自动完成对焦

当焦点移至某个项目(未选择)时触发。默认操作是将文本字段的值替换为焦点项目的值,尽管仅当事件是由键盘交互触发的时才如此。

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

程式码范例

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

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在文本输入中禁用下拉自动完成?

如何使用Django在表单中创建自动完成输入字段

选择后使mui自动完成保留输入值

原始JavaScript输入中的自动完成括号

输入中的自动完成数据

物化:自动完成输入将内容向下移动

使用输入1中的值自动完成输入2

如何使用角度ng-view将内容保留在输入字段中

Laravel + Vue Js中输入字段为空时如何清除自动完成结果?

如何在Material ui自动完成的输入文本字段中显示所选值?

如何在activeadmin中获取自动完成/搜索字段作为输入

如何在ASP.NET Core 2.1中使用自动完成输入引发模式

如何基于句子结构在输入字段中创建多个自动完成功能?

如何在ckeditor对话框输入元素中添加自动完成选项?

删除FormItem中的“自动完成”选项后,如何清除带有已删除值的输入?

如何在JQUERY中过滤搜索输入以显示正确的自动完成功能?

选择地点后,如何在自动完成的地理区域输入中仅显示城市名称?

如何使用自动完成将我的 MySQL 数据编码到 Bootstrap 输入标签中?

如何使用jQuery自动完成功能来搜索特定记录而忽略在输入框中输入的顺序词

React-Native自动完成输入中textInput中的边框

如何将自动完成功能与地理编码相结合以获取纬度。&液化天然气。从这个自动完成功能中的表单输入?

当我使用 jquery-ui 自动完成功能在 textarea 中输入时,如何在任何位置实现自动完成?

jQuery UI自动完成引导模式中的内容

如何根据脚本的不同输入,自动从多个文件的模板中写入内容?

如何将jQuery自动完成附加到输入元素

如何设置样式自动完成输入框的反应?

MonoDevelop:输入方法名称时如何自动完成参数

如何使用 MUI 自动完成禁用 TextField 输入?

如何禁用用户输入以实现自动完成