1.效果图
![](https://i-blog.csdnimg.cn/direct/9ba642d343914ed28c71fb688c46b55d.png)
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&#