HTML & CSS Input field like this one on the forum for the tags.

[SpongeBOB]

Hi everyone,

How can I make simply an ~input field that work like the one on this very forum ? -->


Without any extra add-on (like JSquery etc.. just CSS, HTML, or Regular Javascript.

Thanks.

 

[Ordep-20]

I grab this code from stackover..


Its relative simple you need have a div and a input , an event on typing to show the input after the user type the content will show into a div

<div class="js-tag-editor tag-editor multi-line s-input" style="padding: 0px 9.1px; box-sizing: border-box; margin-top: 0px; margin-bottom: 0px; width: 100%;"><span><span class="s-tag rendered-element">ruby<button class="s-tag--dismiss baw0 js-delete-tag" type="button" title="Remove tag"><svg class="svg-icon iconClearSm pe-none" width="14" height="14" viewBox="0 0 14 14"><path d="M12 3.41L10.59 2 7 5.59 3.41 2 2 3.41 5.59 7 2 10.59 3.41 12 7 8.41 10.59 12 12 10.59 8.41 7z"></path></svg></button></span></span><input type="text" autocomplete="off" tabindex="0" aria-autocomplete="list" aria-haspopup="listbox" role="combobox" aria-expanded="false" placeholder="" id="tageditor-replacing-tagnames--input" class="s-input js-tageditor-replacing" style="width: 19px;"><span></span></div>

<input type="text" autocomplete="off" tabindex="0" aria-autocomplete="list" aria-haspopup="listbox" role="combobox" aria-expanded="false" placeholder="e.g. (ruby-on-rails xcode regex)" id="tageditor-replacing-tagnames--input" class="s-input js-tageditor-replacing" style="width: 19px;">

I seek for more info

 

[SpongeBOB]

Thank you @Ordep-20 , but this cover just the GUI , not how entry generate a proposition list and and add a text as a tag.

 

[Ordep-20]

thats a JS code you'll need to develop I cannot find in https://pt.stackoverflow.com/questions/ask?newreg=3d3440d9fc164380b12f3170b4e556ae sources to help you, try use the firefox developer edition the development tools are more complete than in chrome

 

[SpongeBOB]

Thank you @Ordep-20 , Yes it's what I'm doing wright now (developing one) trough Bryhon though ! Why simpler and powerful 🙂