通过Materialize自动完成-文本而不是可选图像 [英] autocomplete with Materialize - text instead of optional image

问题描述

我正在使用Materialize Autocomplete，我想知道是否存在一种使用文本而不是可选图像"的方法.为什么?如果文本不是唯一的，则用户将不知道该选择哪一个.这些选项可能会是名字，并且可能会有两个人的名字和姓氏相同.

I am using Materialize Autocomplete and I wonder if there is a way to use text instead of "optional image". Why? In case the text is not unique then the user will not know which one to choose. It might happen that the options will be names and there might two people with the same name and surname.

输入问题时，我发现我无法在数据中使用重复的条目

When typing my question I found out that I cannot use duplicate entries in data

    data: {
        "Radek": myself,
        "Radek": some other Radek,
        "Radoslav": 'http://placehold.it/250x250'
    },

js小提琴示例

推荐答案

当您查看

When you look at the source you find the following lines relevant for the images:

autocompleteOption.append('<img src="'+ data[key] +'" class="right circle"><span>'+ key +'</span>');

和

var img = $el.find('img');
$el.html("<span>" + beforeMatch + "<span class='highlight'>" + matchText + "</span>" + afterMatch + "</span>");
$el.prepend(img);

这使我们无法将 image-attribute 用于除图像之外的其他任何内容.

This prevents us from using the image-attribute for anything other than images.

我们可以插入这样的东西来欺骗实现

We can insert something like this to trick Materialize

"Radoslav": " style="display: none;">Inserted Text <br><span style="display: none` 

，但它只会被转换为文本，从而产生等价于

but it will just be converted to text resulting in a option equivalent to

"Inserted Text Radoslav": none

可悲的是，这里没有任何收获.

So there is sadly nothing to be gained here.

但是，如果您要插入换行符，则可以在如何强制使用实现自动完成的文本以流到新行?

If you are looking to insert a linebreak, however, you can use this answer on How to force Materialize autocomplete text to flow to new line?

这篇关于通过Materialize自动完成-文本而不是可选图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！