选择后 JQuery UI AutoComplete 插入 <br>

Question

我在内容可编辑的 div 中使用 JQuery UI AutoComplete。我遇到了一个问题，即在我从自动完成下拉列表中选择一个值并在 <div> 的末尾输入一些内容后插入了 <br>-tag。

重现的步骤是：

1. 写点东西
2. 从自动完成下拉菜单中选择一些内容
3. 将光标置于内容可编辑 div 的末尾
4. 插入空格

这会导致在<div> 的末尾插入一个<br> 标记。我怎样才能防止这种情况发生？

http://jsfiddle.net/qf5L0d27/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="main" contenteditable="true" style="border:1px solid black;width:300px;height:200px"></div>

<script>
    $("div").autocomplete({
        source: function (request, response){
            response(['test1', 'test2']);
        },
        select: function(event, ui){
            el = $("div#main");
            old_content = el.html();
            extra_content = ui.item.value;
            el.html(old_content + extra_content);
            el.autocomplete("destroy");
            return false;
        }
    });
    
</script>

Answer 1

这似乎不是自动完成的问题。

内容可编辑的 div 会根据浏览器在最后插入 <br> 或  ，如果它失去焦点并重新获得焦点。