jeecgboot-vue3，内嵌搜索引擎，输入框含有提示符

置顶

blns_yxl

已于 2024-08-23 19:01:27 修改

阅读量244

点赞数 5

文章标签：搜索引擎 javascript 前端

于 2024-08-23 17:53:06 首次发布

本文链接：https://blog.csdn.net/blns_yxl/article/details/141471420

版权

1.效果图

2.代码实现

<template>
  <a-card style="margin: 15px;">
      <div>
          <br />
          <div class="position-top-right">
              <a-switch v-model:checked="openNetwork" size="small" style="margin-right: 15px;" @change="onSwitchChange" />
              <span @click="showSelect = !showSelect">设置引擎 </span>
              <a-select 
                  v-model:value="selectedValue"
                  class="custom-select" 
                  allowClear
                  v-show="showSelect"
                  @change="handleSelectChange"
                  >
                  <template v-for="item in browserList" :key="`${item.value}`">
                      <a-select-option :value="item.value">{
  { item.label }}</a-select-option>
                  </template>
              </a-select>
          </div>
          <div class="input-container">
            <a-input 
                placeholder="请输入搜索词" 
                v-model:value="inputVal" 
                style="width: 40%;" 
                @keyup="debounceOnKeyup"
                maxlength="50"
                allowClear />
            <a-button type="primary" preIcon="ant-design:search-outlined" @click="search()" >搜索</a-button>
          </div>
          <div class="input-container">
            <ul id="list" v-show="showList">
                <li v-for="item in searchResults" :key&#