Tips for entering multiple values in an input field

Question

Tips for entering multiple values in an input field

I am attempting to implement a feature where multiple names can be added from an autocomplete drop-down menu to an input field, similar to the example shown below:

https://i.sstatic.net/D4hGA.jpg

Here is what I aim to create:

Upon selecting an item from the drop-down, it should appear in the input field exactly as depicted in the image.
If I press backspace in the input field, the entire name should be deleted at once.
I want to be able to add and store multiple names within the input field.

In essence, each name should be contained within its own box, which will then be housed within the input field itself. How can I achieve this using JavaScript?

I have searched online for a solution, but I may not be using the correct keywords. I am unsure of what this feature is called.

javascript html css

Answer 1

Answer №1

If you're looking for a solution, one approach is to:

<div>
  <div role="button">Eight</div>
  <input />
</div>

The idea is to have a container where you insert selected options dynamically (using inner divs) and then include an input element to occupy the remaining space. Additionally, consider using a Menu component to manage the list of options.

One way to achieve this is by utilizing JavaScript. Keep track of the clicked value and insert it into the container. You can create a function to extract the label from the options.
Another method involves listening to key events within the input field and handling them accordingly...
It might be more effective (and simpler) to display additional options outside the input.

For a practical example, check out material-ui Autocomplete. You can inspect its implementation via your browser or explore the code on GitHub. Alternatively, explore other libraries that offer similar functionalities.

Answer 2

If you're looking for a solution, one approach is to:

<div>
  <div role="button">Eight</div>
  <input />
</div>

The idea is to have a container where you insert selected options dynamically (using inner divs) and then include an input element to occupy the remaining space. Additionally, consider using a Menu component to manage the list of options.

One way to achieve this is by utilizing JavaScript. Keep track of the clicked value and insert it into the container. You can create a function to extract the label from the options.
Another method involves listening to key events within the input field and handling them accordingly...
It might be more effective (and simpler) to display additional options outside the input.

For a practical example, check out material-ui Autocomplete. You can inspect its implementation via your browser or explore the code on GitHub. Alternatively, explore other libraries that offer similar functionalities.

Tips for entering multiple values in an input field

Answer №1

Similar questions

Check out this stylish Twitter-inspired SVG text counter created with a combination of CSS and jQuery! See it in action here: https://jsfiddle.net/moss24

What is the best way to incorporate the .then method in a promise?

Ways to streamline a form containing several duplicate rows and make it more user-friendly

Can a CSS class be designed to have a value that changes dynamically?

Navigating to the default landing page using basic authentication middleware in Express

Error message: Selenium is having trouble finding the search bar, regardless of the selector method (such as xpath, css_selector, fullXpath, etc.)

What is the best approach for rendering HTML on a page both initially and dynamically as it is updated, given the heavy utilization of ajax?

Unexpected outcomes arising from using nested arrays with jQuery validation plugin

Code breaking due to Selenium locating element by class

Sorting through items based on several URL parameters

Executing a function in Angular 2 depending on the class assigned to a <div>

Is there a different method like Calc() to create a static sidebar alongside content?

Differences between Sequelize classMethods and instanceMethods

What is the best way to expand a scrollbar's width with CSS?

Use the inline IF statement to adjust the icon class depending on the Flask variable

The created function in VueJS may sometimes result in an undefined outcome

What is the best way to ensure consistent code placement at the bottom of my Django Template using inheritance?

Permanently removing artwork from the Canvas

Is there a way to prevent pop-up windows from appearing when I click the arrow?

Presentation for a div's background image with the use of jQuery