The input input box remembers the input value saved before, which is convenient for proofreading and viewing selection when entering next time. This is a very common requirement.
There are many ways to implement:
Method 1: Store the input value in the database, query it before the next input, and display it below the input box. Advantages: accurate, stable, and persistent data; Disadvantages: server-side support is required, additional front-end and back-end interactions, and server resource occupation.
Method 2: Save the input value locally (webstorage, cookie, etc.), get it before the next input, and display the analysis at the bottom of the input box. Advantages: No back-end support, less requests, pure front-end implementation; Disadvantages: To evaluate the persistence and stability of data, consider clearing browser cache, changing browsers, etc.
Method 3: Based on methods 1 and 2, use some components to avoid writing some interaction logic by yourself, for example: <el-autocomplete> component in element-ui, <Autocomplete> component in ant design.
Method 4: Use the combination of the autocomplete and name attributes of the input form control. Advantages: simple code, less interaction, use the default behavior of the form. Disadvantages: Same as the disadvantages of Method 2.
