如何强制实现自动完成文本流到新行？

Question

我需要在建议的自动完成中重复。为什么？
可能有两个同名同姓的人。我正在使用 Materialize，但它不提供该功能。我正在考虑添加一些额外的文本，例如电子邮件左右，以使其按我需要的方式工作。为了让它看起来更好，我希望“额外”文本总是在新行上。

但我不知道该怎么做。我尝试了<BR>、
 和\n，但没有成功。知道如何使它工作吗？

    data: {
        "Radek Surname - radeksurname@ymail.com": null,
        "Radek<BR> new line": null,
        "Radoslav": 'http://placehold.it/250x250'
    },

https://jsfiddle.net/radek/8e7kvf6r/17/

看起来 BR 标记已被删除，并且不再出现在 HTML 源代码中。看图。

Answer 1

极其不雅，但又快又脏：

添加到 CSS：

.autocomplete-content span
{
  white-space: pre;
}

在js中：

{
  "Radek\n new line": null,
  [`Or Radek
another new line`]: null
}

小提琴：https://jsfiddle.net/c6revjmu/2/

Answer 2

Materialize 0.98.0 会因为突出显示而将html-conversion 加倍。 See Source

每个选项首先转换为DOM-object。然后通过.text() 再次提取文本。这就是杀死<br> 解决方案的原因。但这又被转换为DOM-object。

所以我们可以像这样巧妙地进行双重转义：

data: {
    "Radek Surname <br> radeksurname@ymail.com": null,
    "Radek <br> new line": null,
    "Radoslav": 'http://placehold.it/250x250'
},

因为<br> 转换为<br> 转换为换行符。

不需要额外的js 或css。

function sendItem(val) {
    document.getElementById('log').textContent = val + '\n' +
          document.getElementById('log').textContent;
}

$(function () {
    $('input.autocomplete').autocomplete({
        data: {
            "Radek Surname<br> radeksurname@ymail.com": null,
            "Radek<br> new line": null,
            "Radoslav": 'http://placehold.it/250x250'
        },
        onAutocomplete: function(txt) {
          sendItem(txt);
          alert(txt);
        },
        limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
    });

});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

<div class="row">
    <div class="col s12">
        <div class="row">
            <div class="input-field col s6">
                <input type="text" id="autocomplete-input" class="autocomplete" autocomplete="off">
                <label for="autocomplete-input">Type my name - Radek</label>
            </div>
        </div>
    </div>
</div>

还有：JsFiddle：https://jsfiddle.net/sjtznqh5/