javascript – Inline drop list selection as you type in free text input HTML-ThrowExceptions

Exception or error:

I am looking for a way of adding functionality to a text area input on an HTML page where you can write into a text field and as you type, if you add an ampersand and @start_typing it would provide you with a list of options which will incrementally reduce as you type more of the letters of a word from the list.

I basically want what you can do in Atlassian Confluence when you add a colleague into a page or comment. I want to be able to add one or more value in a text input with the help of a list of options.

I have found autocomplete from a drop list as you type as an alternative to select from a list but that is where the selection is the only thing that ends up in the onscreen variable.

For example, I want to type @gross_value = @net_value + @tax_value and at each point of adding an @ in that entire sentence, it would drop a list of options I can either select from or keep typing (using the list as a reference just like you do in Visual Studio Code.)

So here’s my code example below. In my use case, I know the name of the list I want to use, it would be schema_values (a list of origin and destination schema values used in mapping) and I know that I would use one of those values more than once in a formula.

In the context of the example below, I might want to type the sentence, ‘my favourite car is a @Saab and I don’t really like @Skoda’ – what I would expect to happen is as I type the @ I get the full list of cars then when I type S I only get the options for SaaB and Skoda and when I’ve selected or finished typing the item which exists in the list, it leaves the ampersand there.

I have a program which transforms from one data schema to another and the interface requires me to create formulas which include the selection of values to set the from and to parameters which match the schema values which I will put together in a set of options as shown.

It would be used for a mathematical calculation or to map from one value to another. The purpose of the interface is to create a configuration file which can be processed by an application.

<input type="text" list="cars" />
    <datalist id="cars">
       <option>Volvo</option>
       <option>Saab</option>
       <option>Skoda</option>
       <option>Mercedes</option>
       <option>Audi</option>
    </datalist>
How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *