I am not able to style my input values as 'chips'

Question

I have the following input with for example two values

 <input id="input" type="text" />

let input = document.getElementById('input');
console.log(input);
input.value = 'John Peter';

I want this input values to appear as chips above my input but i can't find a way - how can i style the values inside my input. I need to do that because i have autocomplete where when i click on input additional window is opened where i can choose the options.

When i choose some option, it needs to appear as CHIP above the input.

Something like

https://material.angular.io/components/chips/examples

So my chip styles looks like this

 .chip { display: inline-block; padding: 0 18px; font-size: 14px; border-radius: 25px; background-color: #e0e0e0; font-weight: 600; min-height: 32px; display: flex; align-items: center; color: rgba(0, 0, 0, 0.87); transition: 0.2s all ease; width: 60px; }.chip img { float: left; margin: 0 10px 0 -25px; height: 32px; width: 32px; border-radius: 50%; }.closebtn { color: #888; font-weight: bold; font-size: 20px; cursor: pointer; background-color: #0a0a0a; border-radius: 50%; width: 14px; height: 14px; color:#ffffff; position: relative; color: rgba(0,0,0,.87); opacity: .5; margin-left: 10px; }.close-icon { position: absolute; top: 55%; left: 50%; transform: translate(-50%, -60%); color:#704e4e; }.closebtn:hover { color: #000; }

 <div class="chip"> <span class="chip-text">Peter</span> <div class="closebtn"><span class="close-icon">&times;</span> </div> </div>

how can i make my values on the input John and Peter to appear as two chips on my input?

Answer 1

The below accomplishes what you wanted. It creates 1 chip per name (the John and Peter) that you started with. Then attaches an on change listener to the input to take any new names and create a chip.

 document.getElementById('input').addEventListener('change', function () { createChip(this.value); this.value = ''; }); ['John', 'Peter'].forEach(createChip); function createChip(val) { const el = document.createElement('li'); el.innerText = val; document.getElementById('chips').appendChild(el); }

 #chips { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; list-style: none; padding: 0; } #chips li { display: inline-block; padding: 0 18px; font-size: 14px; border-radius: 25px; background-color: #e0e0e0; font-weight: 600; min-height: 32px; display: flex; align-items: center; color: rgba(0, 0, 0, 0.87); transition: 0.2s all ease; width: 60px; } #chips li::after { content: '\00D7'; position: relative; right: -25px; top: -10px; font-weight: bold; font-size: 20px; cursor: pointer; border-radius: 50%; color: rgba(0,0,0,.2); opacity: .5; } #chips li:hover::after { color: #000; } #input { border: none; }

 <ul id="chips"></ul> <input id="input" type="text" />

Answer 2

• Do not set your width for the chip, it won't be overflow with the content so add padding instead of width