This is an auto-completion React code. Based on React and BootStrap.
Preview
When you type in some words in the input box, some suggestion options will show up. You can either press Enter or click on the suggested options to select content. Do not type in an all-space string. Space at the start and end will be removed.
Once you hit Enter or click on the suggestion option, a new tag is generated. You can click on the cross in the tag to delete this tag. If there are too many tags, some tags will be put into the "more" dropdown to avoid overflow.
There are three different types of elements in the right of the suggestion options. The first type is a number input box, you can choose a number from 10 to 100. The second type is a string input box. Then the third one is a random string. If I click on the submit button, the information will show up in the table. The description is "null" if you directly press Enter or didn't type anything in the suggestion option input box.
Click on submit button and all the tags' information will be shown in the following table.
When adding tags, sometimes the submit button will go down to the next row.
I estimate the whole length of all tags using a formula totalTags * 60 + totalString.length * 16 rather than get the DOM width attribute. Somethings the hidden tags will not show up though there is enough space after remove a tag. The 60 is an empirical number and 16 is the font size.
If a very long string is typed in, some part of the suggestion will exceed the box. So I hide the overflowing part. I will try to add a tooltip for the long suggestion options, which appears when the mouse hovers over the option.
Some of the code can be simplified but the project has taken too much time.
Putting an element into an input element is not allowed. So, I wrap a div outside the input element and add tags as the sibling elements. Using some CSS tricks, the tags float upon the input box, which makes it looks like inside the input box.
Every time a tag added or removed, the function getTagsWidth will calculate the number of tags and the length of all strings. Then it decides a tag shown or hidden. If the tags are long enough, some tags are hidden. If a tag is removed, the other hidden tags' fold property will be rechecked to determine it should be shown or hidden.
the container of the input box and the relevant elements are set to absolute position, which makes the suggestion options float over the table, rather than pushes the table whenever the suggestion options show up.
The function generateSource generate some random strings as well as [value,value+value,value+value+value], so that there are always at least three suggestion options.
The CSS is a little bit boring and tiring. I spend much time adjusting the CSS. Although I use Bootstrap as the UI Library, I still need to customize some of the styles to implement some layouts like tags in the input box and input box's padding
The webpage is not responsive. A larger screen is recommended.
- Auto-completion in Antd
- input number in Antd
- select in antd However, I prefer to build up these components from scratch as this is a practice.
- Bootstrap React After I began programming, I noticed there is a Libray: Bootstrap for React. I didn't want to re-write my code, so I didn't adopt this library.
Add a style {flexWrap:"nowrap"} for .input-group so that the button won't go to the next row. The .input-group class has a default css flex-wrap: wrap;
Add a pair of brackets so that the program can correctly calculate the number of tags.
bind a tag with a specified color. It doesn't change when the user adds or deletes other tags.
add a tooltip when the input string's length is more than 18 and the mouse is hover on the options. The tooltip component is from Antd.