Home Web Front-end JS Tutorial How to implement fuzzy query in vue input box

How to implement fuzzy query in vue input box

May 28, 2018 pm 12:01 PM
input Vague enter

This time I will show you how to implement fuzzy query of vue input input box, and what are the precautions to implement fuzzy query of vue input input box. The following is a practical case, let's take a look.

Vue fuzzy query function

Principle: The search() method of native js is used to retrieve the substring specified in the

string, Or retrieve a substring that matches the regular expression. If no matching substring is found, -1 is returned.

Input input box, fuzzy query

<template>
 <p>
  <input type="text" placeholder="请输入..." v-model="searchVal">
  <ul>
   <li v-for="(item,index) in NewItems" :key="index" :value="item.value" v-text="item.name"></li>
  </ul>
 </p>
</template>
<script>
export default {
 name: "HelloWorld",
 data() {
  return {
   searchVal: "",
   items: [
    {
     name: "上海",
     value: "sh"
    },
    {
     name: "北京",
     value: "bj"
    },
    {
     name: "重庆",
     value: "cq"
    },
    {
     name: "嗨嗨嗨",
     value: "hhh"
    },
    {
     name: "海上",
     value: "hs"
    },
    {
     name: "京都",
     value: "jd"
    }
   ]
  };
 },
 methods: {},
 computed: {
  NewItems() {
   var _this = this;
   var NewItems = [];
   this.items.map(function(item) {
    if (item.name.search(_this.searchVal) != -1) {
     NewItems.push(item);
    }
   });
   return NewItems;
  }
 }
};
</script>
Copy after login
The effect is as follows:

Believe it After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to build an mpvue applet project

Detailed explanation of the steps for using Jsonp in VUE2.0

The above is the detailed content of How to implement fuzzy query in vue input box. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Disabling Win11 Input Experience Guide Disabling Win11 Input Experience Guide Dec 27, 2023 am 11:07 AM

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] Windows input encounters hang or high memory usage [Fix] Feb 19, 2024 pm 10:48 PM

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.

How to blur photos with Yitian camera How to blur photos with Yitian camera Feb 23, 2024 pm 06:40 PM

You can blur the photos in Yitian Camera, so how to blur the photos? Users can click Edit to select a photo, then click Effects and select Blur to blur the photo. This introduction to how to blur photos can tell you the specific content. The following is a detailed introduction, come and take a look! Yitian Camera usage tutorial. How to blur photos with Yitian Camera. Answer: Go to Edit-Special Effects-Blur. The specific process: 1. First open the app and click Edit on the lower left. 2. Then click on a picture and click the edit button. 3. Then click the special effects button below. 4. You can find the blur function below. 5. Then select the magnification of the blur.

How to solve the problem of blurry wallpaper in win11 How to solve the problem of blurry wallpaper in win11 Jan 02, 2024 pm 09:05 PM

Sometimes the wallpaper is blurred when using Win11. I don’t know what’s going on. In fact, we can solve it by modifying the registry or application compatibility. Win11 wallpaper blur solution: 1. Desktop blur 1. If the desktop is blurred, you can right-click the bottom start menu and open "Run" 2. Then enter "regedit" and press Enter to open the registry. 3. After opening, go to the "Computer\HKEY_CURRENT_USER\ControlPanel\Desktop" location. 4. After entering, right-click on the blank space and select Create a new "DWORD Value" 5. Rename it to "JPEGImportQuality" and double-click to open the data.

Solution: Win7 display is blurry and has ghosting Solution: Win7 display is blurry and has ghosting Jul 14, 2023 pm 09:41 PM

Some Win7 customers have experienced monitor blur and ghosting, resulting in a poor visual experience. What should we do in this situation? You can first open the monitor's settings control panel to see if there is any ghosting in the above content. If there is a problem, please repair the monitor immediately; if not, you can check the monitor's electrode cable to see if it is plugged in or the plug is deformed. Different situations must be handled differently. Solution: Win7 display is blurry and has ghosting. 1. First adjust it to the display's settings menu page to check whether the text on the display's settings menu has a drag shadow. If it is, it proves that the monitor is at fault and the monitor should be repaired immediately. If the monitor's setup menu shows no ghosting, there should be nothing wrong with the monitor itself.

How to implement laravel input hidden field How to implement laravel input hidden field Dec 12, 2022 am 10:07 AM

How to implement the laravel input hidden field: 1. Find and open the Blade template file; 2. Use the method_field method in the Blade template to create a hidden field. The creation syntax is "{{ method_field('DELETE') }}".

How to encapsulate input components and unified form data in vue3 How to encapsulate input components and unified form data in vue3 May 12, 2023 pm 03:58 PM

Preparation Use vuecreateexample to create a project. The parameters are roughly as follows: use native input. Native input is mainly value and change. The data needs to be synchronized when changing. App.tsx is as follows: import{ref}from'vue';exportdefault{setup(){//username is the data constusername=ref('Zhang San');//When the input box changes, synchronize the data constonInput=;return( )=>({

How to blur the background of an image using Python How to blur the background of an image using Python Aug 19, 2023 pm 04:51 PM

How to use Python to blur the background of pictures Introduction: In the modern era of social media, we often see some impressive photos. People’s eyes are attracted by the objects or people focused on the lens, but the background is often blurred. to highlight the focus of the topic. This article will introduce how to use Python to blur the background of images, and use code examples to help readers understand and apply this technology. 1. Background blur method There are many ways to blur the background of pictures. This article will introduce two commonly used methods: Gaussian blur and

See all articles