手写H5页面input框远程搜索

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言 👀

近期的一项小需求中，在对接电子发票的时候，我们的H5界面，需要能够通过输入相应信息实时去调取数据，然后以列表展示出来，以供用户选择。

鉴于我的项目是采用的vant UI，于是呼，便先去查阅了一波文档，有点遗憾，暂时并没有提供相应的API,那就自己手动实现呗，哈哈哈🐱‍🏍

一、具体功能

• 用户输入相应的信息，能够实时搜索
• 查询不到的信息，能够给予用户提示
• 查询到的信息,列表信息支持滚动查看
• 用户输入的信息，在搜索到对应的信息后，标出关键字

二、实现的具体思路

• 以用户最后一次输入为准，去调取接口数据(写个节流方法)
• 关键字提取

在理清了以上这些信息后，接下来就可以愉快的码代码了 ✍

<!-- 发票抬头 -->
<section class="inputContainer">
    <main class="inputBox">
        <div class="left">
           <span>发票抬头</span>
        </div>
        <div class="right">
            <input
                v-model="text
                type="text"
                placeholder="请填写需要开具发票的企业名称"
                :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>
                        暂无数据
                    </li>
                </template>
            </ul>
        </div>
    </main>
</section>

import { reactive, toRefs, getCurrentInstance } from "vue";
export default {
 setup() {
   const state = reactive({
       text:'', //输入框输入的值
       timer: null,
       isGetText:false // 是否获取到数据
       resList:[], //获取到的信息列表
   })
   
   // 这里的ctx  类似于vue2的this
   const { proxy: ctx } = getCurrentInstance();
   
   const methods = {
     clearTimer() {
        if (state.timer) {
           clearTimeout(state.timer)
        }
     },
     // 调取接口查询=>节流查询
     handleQuery() {
        ctx.clearTimer()
        ctx.timer = setTimeout(async() => {
            state.resList =  await ctx.getCompanySearch()
            ctx.changeColor(state.resList)
        }, 1000)
     },
     // 接口请求
     getCompanySearch(){
       //这里写你的请求
     },
     // 关键字提取
     changeColor(){
        state.isGetText = true
        resultsList.map((item, index) => {
          if (state.text && state.resList.length > 0) {
	       // 匹配关键字正则
	       let replaceReg = new RegExp(state.text, 'g')
             // 高亮替换v-html值
             let replaceText = `<span style="color:'red'">` + state.text + `</span>`
             // 输入框的值
             resultsList[index].inputText = item.name.replace(
                replaceReg,
                replaceText
             )
   
          }
        })
        state.resList = []
        state.resList = resultsList
     },
     // 把带有html 的文本变成text文本
     repalceHtmlToText(str) {
         str = str.replace(/<\/?.+?>/g, '') //标签解析
         str = str.replace(/&nbsp;/g, '') //去除空格
         return str
     },
     // 得到转化后的文本赋值给文本输入框
     getText(item) {
        text: ctx.repalceHtmlToText(item.inputText),//获取到的数据 且 标记关键字
     }
   }
   return {
      ...toRefs(state),
      ...methods
   };
}

实现效果

撰文不易，点赞鼓励 👍👍👍

你的鼓励，将是我持续创作的动力👍👍👍