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

问题

I need duplicates in the suggested autocomplete. Why?
There might two people with the same name and surname. I am using Materialize and it does not offer that feature. I was thinking to add some extra text for example email or so to make it work the way I need. To make it look nicer I want the "extra" text be always on new line.

But I do not know how to do that. I tried <BR>, 
 and \n but it did not work. Any idea how to make it work?

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

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

it looks like the BR tag was removed and is not in HTML source code anymore. See the picture.

回答1:

Materialize 0.98.0 does a sort of doubled html-conversion because of the highlighting. See Source

Every optin is first converted to a DOM-object. Then via .text() the text is extracted again. This is what killed the <br> solution. But this is then again converted to DOM-object.

So we can cleverly do a double escape like so:

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

Because <br> converts to <br> which converts to a line break.

No aditional js or css needed.

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>

Also: JsFiddle: https://jsfiddle.net/sjtznqh5/

回答2:

extremely inelegant, but quick and dirty:

add to css:

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

and in js:

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

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

来源：https://stackoverflow.com/questions/65521378/how-to-force-materialize-autocomplete-text-to-flow-to-new-line

标签

javascript

css

autocomplete

materialize