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

Question

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

但我不知道该怎么做。我尝试了 <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
}

fiddle: https://jsfiddle.net/c6revjmu/2/

Answer 2

Materialize 0.98.0 由于突出显示而做了某种加倍 html-conversion。 See Source

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

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

data: {
    "Radek Surname &lt;br&gt; radeksurname@ymail.com": null,
    "Radek &lt;br&gt; 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&lt;br&gt; radeksurname@ymail.com": null,
            "Radek&lt;br&gt; 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/

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

How to force Materialize autocomplete text to flow to new line?

javascript

css

autocomplete

materialize