如何强制实现自动完成的文字流到新行? [英] How to force Materialize autocomplete text to flow to new line?

问题描述

在建议的自动完成功能中，我需要重复的内容.为什么?
可能会有两个人的名字和姓氏相同.我正在使用Materialize，但它不提供该功能.我正在考虑添加一些额外的文本，例如电子邮件等，以使其按我需要的方式工作.为了使其看起来更好，我想要额外的"商品.文字总是换行.

但是我不知道该怎么做.我尝试了< BR> ，
 和 \ n ，但这没有用.知道如何使它起作用吗?

 数据:{"Radek姓[e-mail]":空，< Radek< BR>换行":null，"Radoslav":"http://placehold.it/250x250"}， 

看来，BR标签已被删除，并且不再包含在HTML源代码中.看到图片.

由于突出显示，

解决方案

对 0.98.0 进行材料化会使 html-conversion 翻了一番.请参见源文件

每个optin首先都转换为 DOM对象.然后通过 .text()再次提取文本.这就是杀死&br; br> 解决方案的原因.但这随后又被转换为 DOM对象.

因此，我们可以像这样聪明地进行两次转义:

 数据:{" Radek姓& lt; br& gt;[e-mail]":空，< Radek& lt; br& gt;换行":null，"Radoslav":"http://placehold.it/250x250"}， 

因为& lt; br& gt 会转换为&br; br> ，这会转换为换行符.

不需要附加的 js 或 css .

  function sendItem(val){document.getElementById('log').textContent = val +'\ n'+document.getElementById('log').textContent;}$(函数(){$('input.autocomplete').autocomplete({数据: {"Radek姓氏[e-mail]":空，"Radek& lt;换行":null，"Radoslav":"http://placehold.it/250x250"}，onAutocomplete:函数(txt){sendItem(txt);警报(txt);}，limit:20，//可以一次显示的最大结果数.默认值:无穷大.});});  

 <脚本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">输入我的姓名-Radek</label></div></div></div></div>  

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

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 - [e-mail]": 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.

解决方案

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 <br> [e-mail]": null,
    "Radek <br> 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<br> [e-mail]": 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>

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

这篇关于如何强制实现自动完成的文字流到新行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！