Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Preface πŸ‘€

Recently, when connecting with electronic invoice, our H5 interface needs to be able to retrieve data in real time by inputting corresponding information, and then display it in a list for users to choose.

In view of my project is using vant UI, so hu, I first went to consult a wave of documents, a little regret, temporarily did not provide the corresponding API, then manually implement it, hahaha 🐱🏍

1. Specific functions

  • Users can enter corresponding information and search in real time
  • The user can be prompted if the information cannot be queried
  • You can scroll to view the queried information and list information
  • If the information entered by the user is found, the keyword is marked

Second, the concrete idea of implementation

  • Retrieves interface data based on last user input (write a throttling method)
  • Keyword extraction

With this information sorted out, the next thing you can use is ✍ code

<! -- Invoice title -->
<section class="inputContainer">
    <main class="inputBox">
        <div class="left">
           <span>The invoice looked up</span>
        </div>
        <div class="right">
            <input
                v-model="text type="text"
                placeholder="Please fill in the name of the company to be invoiced."
                :maxlength="80"
                @input="handleQuery"
            />
            <ul v-if="isGetText">
                <template v-if="resList.length > 0 ">
                    <li
                        v-for="(item, index) in resList"
                        :key="index"
                        v-html="item.name"
                        @click="getText(item)"
                    >
                    </li>
                </template>
                <template v-else>
                    <li>Temporarily no data</li>
                </template>
            </ul>
        </div>
    </main>
</section>
Copy the code
import { reactive, toRefs, getCurrentInstance } from "vue";
export default {
 setup() {
   const state = reactive({
       text:' '.// The value entered in the input box
       timer: null.isGetText:false // Whether to obtain data
       resList: [].// List of information obtained
   })
   
   // CTX is similar to vue2's this
   const { proxy: ctx } = getCurrentInstance();
   
   const methods = {
     clearTimer() {
        if (state.timer) {
           clearTimeout(state.timer)
        }
     },
     // Query query interface => Query throttling
     handleQuery() {
        ctx.clearTimer()
        ctx.timer = setTimeout(async() => {
            state.resList =  await ctx.getCompanySearch()
            ctx.changeColor(state.resList)
        }, 1000)},// Interface request
     getCompanySearch(){
       // Write your request here
     },
     // Keyword extraction
     changeColor(){
        state.isGetText = true
        resultsList.map((item, index) = > {
          if (state.text && state.resList.length > 0) {
	       // Matches the keyword re
	       let replaceReg = new RegExp(state.text, 'g')
             // Replace v-HTML values with highlights
             let replaceText = `<span style="color:'red'">` + state.text + `</span>`
             // Enter the value of the box
             resultsList[index].inputText = item.name.replace(
                replaceReg,
                replaceText
             )
   
          }
        })
        state.resList = []
        state.resList = resultsList
     },
     // Change HTML text to text
     repalceHtmlToText(str) {
         str = str.replace(/ < / /? . +? >/g.' ') // Tag parsing
         str = str.replace(/Β  /g.' ') // remove whitespace
         return str
     },
     // Get the converted text and assign it to the text input box
     getText(item) {
        text: ctx.repalceHtmlToText(item.inputText),// Get the data and mark the keyword}}return{... toRefs(state), ... methods }; }Copy the code

Implementation effect

Writing is not easy, please encourage πŸ‘πŸ‘πŸ‘

Your encouragement will be the motivation for my continuous creation πŸ‘πŸ‘πŸ‘