Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
668 views
in Technique[技术] by (71.8m points)

autocomplete with Materialize - text instead of optional image

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 fiddle example


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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>');

and

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

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?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...