Example of a simple auto-complete input box in vue
This article mainly introduces an example of Vue's simple auto-complete input box. Now I share it with you and give it as a reference.
Implement an input box. After inputting information, the data returned by the background is displayed for the user to choose. The elm component was used before, but that one was a bit big. . . In simple cases, implementing one yourself can also meet the requirements. . . Maybe. . .
The theme includes an input for input, a p for displaying data, and p is the data item item
When you press Enter in the input When, the data will be obtained from the background based on the information. If the user clicks elsewhere and the input loses focus, the p in the prompt should also be put away
bug:
In the blur event, if Directly setting isShow to false will cause problems. The focus will be lost first and the display panel will disappear, so your clicks will not be monitored. . . Set a timer to close the panel 10ms after clicking, and the problem is solved. . .
Display p to expand the content, change the layout of other components, set the properties of p, and set the height to 0. If the z-index is large, the position of other components will not be changed
height: 0; z-index: 999;
<template> <p class="container"> <input v-model="msg" @keyup.enter="search" class="msg" @blur="blur"/> <p class="select-panel"> <p v-show="isShow" v-for="w in words" class="select-item" @click="click_item(w)">{{w['content']}}</p> </p> </p> </template>
SIMPLE IMPLEMENTATION CODE
<template> <p class="container"> <input v-model="msg" @keyup.enter="search" class="msg" @blur="blur"/> <p class="select-panel"> <p v-show="isShow" v-for="w in words" class="select-item" @click="click_item(w)">{{w['content']}}</p> </p> </p> </template> <script> import {search_word} from "../api/word-api"; export default { name: "auto-complete", data() { return { msg: '', words: [], isShow: false } }, computed: {}, methods: { blur() { setTimeout(() => { this.isShow = false }, 200) }, async search() { console.log('search msg', this.msg) this.words = await search_word(this.msg) console.log(this.words) this.isShow = true }, click_item(w) { console.log('click word', w) this.$emit('add_word', w) } }, } </script>
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
A simple example of the local preview effect of uploaded images implemented by jQuery
Detailed explanation of what new() does in Javascript What
Sample code for file upload and download in Koa2
The above is the detailed content of Example of a simple auto-complete input box in vue. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Recently, many Win11 users have encountered the problem that the input experience dialog box always flickers and cannot be turned off. This is actually caused by the default system services and components of Win11. We need to disable the relevant services first, and then disable the input experience service. Solved, let’s try it out together. How to turn off the input experience in win11: First step, right-click the start menu and open "Task Manager". Second step, find the three processes "CTF Loader", "MicrosoftIME" and "Service Host: Textinput Management Service" in order, right-click "End Task" "The third step, open the start menu, search and open "Services" at the top. The fourth step, find "Textinp" in it
![Windows input encounters hang or high memory usage [Fix]](https://img.php.cn/upload/article/000/887/227/170835409686241.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
The Windows input experience is a key system service responsible for processing user input from various human interface devices. It starts automatically at system startup and runs in the background. However, sometimes this service may automatically hang or occupy too much memory, resulting in reduced system performance. Therefore, it is crucial to monitor and manage this process in a timely manner to ensure system efficiency and stability. In this article, we will share how to fix issues where the Windows input experience hangs or causes high memory usage. The Windows Input Experience Service does not have a user interface, but it is closely related to handling basic system tasks and functions related to input devices. Its role is to help the Windows system understand every input entered by the user.

Introduction to Python functions: Introduction and examples of exec function Introduction: In Python, exec is a built-in function that is used to execute Python code stored in a string or file. The exec function provides a way to dynamically execute code, allowing the program to generate, modify, and execute code as needed during runtime. This article will introduce how to use the exec function and give some practical code examples. How to use the exec function: The basic syntax of the exec function is as follows: exec

Preface: vim is a powerful text editing tool, which is very popular on Linux. Recently, I encountered a strange problem when using vim on another server: when I copied and pasted a locally written script into a blank file on the server, automatic indentation occurred. To use a simple example, the script I wrote locally is as follows: aaabbbcccddd. When I copy the above content and paste it into a blank file on the server, what I get is: aabbbcccddd. Obviously, this is what vim does automatically for us. Format indentation. However, this automatic is a bit unintelligent. Record the solution here. Solution: Set the .vimrc configuration file in our home directory, new

The DECODE function in Oracle is a conditional expression that is often used to return different results based on different conditions in query statements. This article will introduce the syntax, usage and sample code of the DECODE function in detail. 1. DECODE function syntax DECODE(expr,search1,result1[,search2,result2,...,default]) expr: the expression or field to be compared. search1,

Introduction to Python functions: Usage and examples of the isinstance function Python is a powerful programming language that provides many built-in functions to make programming more convenient and efficient. One of the very useful built-in functions is the isinstance() function. This article will introduce the usage and examples of the isinstance function and provide specific code examples. The isinstance() function is used to determine whether an object is an instance of a specified class or type. The syntax of this function is as follows

Indentation specifications and examples of Go language Go language is a programming language developed by Google. It is known for its concise and clear syntax, in which indentation specifications play a crucial role in the readability and beauty of the code. effect. This article will introduce the indentation specifications of the Go language and explain in detail through specific code examples. Indentation specifications In the Go language, tabs are used for indentation instead of spaces. Each level of indentation is one tab, usually set to a width of 4 spaces. Such specifications unify the coding style and enable teams to work together to compile

Introduction to Python functions: usage and examples of the abs function 1. Introduction to the usage of the abs function In Python, the abs function is a built-in function used to calculate the absolute value of a given value. It can accept a numeric argument and return the absolute value of that number. The basic syntax of the abs function is as follows: abs(x) where x is the numerical parameter to calculate the absolute value, which can be an integer or a floating point number. 2. Examples of abs function Below we will show the usage of abs function through some specific examples: Example 1: Calculation
