hbis-search-input 组件

可进行输入筛选搜索的 UniApp 组件，支持自定义搜索、显示、清空等功能。

功能特性

• ✅ 支持自定义搜索列表
• ✅ 支持清空按钮显示/隐藏
• ✅ 支持自定义搜索方法，调用搜索来动态修改列表
• ✅ 支持设置是否聚焦input时显示下拉列表
• ✅ 支持设置下拉列表高度，超出可以进行滚动
• ✅ 支持设置是否输入完毕后才进行搜索
• ✅ 支持自定义提示语
• ✅ 响应式设计，适配不同屏幕
• ✅ Vue 3 + TypeScript 开发
• ✅ 支持按需引入
• ✅ 兼容 UniApp 所有平台

安装

方式一：通过主组件库安装

pnpm add @hbis-uni/components

方式二：单独安装

pnpm add @hbis-uni/hbis-search-input

使用

基本使用

<template>
  <hbisSearchInput
     :list="dataList" placeholder="请输入" :defaultValue="chosenData"
	@select="handleSelect" @search="handleSearch" ref="search" 
  />
</template>

<script setup lang="ts">
import { hbisSearchInput } from '@hbis-uni/components';
</script>

隐藏清空按钮的使用

<template>
	<div class="container">
		<h1>hbis-search-input 组件简单测试</h1>
		<div class="input-container">
		<hbisSearchInput :list="dataList" placeholder="请输入" :defaultValue="chosenData" @select="handleSelect"
	@search="handleSearch" @clearIcon="clear" :onFocusShowList="true" :maxHeight="120" :enter-search="true"
	ref="search" />
		</div>

	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import hbisSearchInput from '../../../packages/components/hbis-search-input/src/hbis-search-input.vue';
	const dataList = ref([{
		label: '1',
		value: 0
	}, {
		label: '床前明月光',
		value: 1
	}, {
		label: '吃葡萄不吐葡萄皮',
		value: 2
	}, {
		label: 'good good study',
		value: 3
	}, {
		label: '测试44',
		value: 4
	}, {
		label: '河钢测试',
		value: 5
	}

]);
	const chosenData = ref('');
	const clear = () => {
		chosenData.value = ''
	};
	// 处理选择
	const handleSelect = (item) => {
		chosenData.value = item.name || '';
	};
	// 处理搜索
	const handleSearch = (searchText, filteredList) => {
		console.log('搜索关键词:', searchText);
		chosenData.value = searchText || '';
		console.log('筛选结果:', filteredList);
	};
</script>

## API

### 属性

| 属性名 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| list | array | 必填 | 搜索列表，格式为[{label: '文字1'，value:0}, {label: '文字2'，value:0}]|
| placeholder | string | 请输入关键词搜索 | 提示语 |
| defaultValue | string | '' | 选中值 |
| maxHeight | Number | 400 | 下拉列表最大高度，超出进行滚动，单位px |
| showClear | boolean | true | 是否显示清空按钮 |
| enableSwipe | boolean | true | 是否启用滑动切换图片功能 |
| onFocusShowList | boolean | true | 是否聚焦时显示下拉列表 |
| enterSearch | boolean | false | 是否输入完毕时才进行搜索 |

### 事件

| 事件名 | 参数 | 说明 |
| --- | --- | --- |
| clearIcon | 无 | 点击清空按钮时触发 |
| select | item| 点击列表子项时触发 |
| search | searchText, filteredList | 搜索时触发|



## 样式说明

### 组件结构

.search-dropdown/ ├── .input-wrapper # 搜索输入框 │ ├── .search-input # 输入框 │ ├── .clear-icon # 清空按钮 ├── .dropdown-list # 搜索下拉列表 │ ├── .dropdown-item # 下拉列表子项 │ │ ├── .item-text # 下拉列表子项标题

### 样式类名

| 类名 | 说明 |
| --- | --- |
| search-dropdown | 组件根容器类 |
| input-wrapper | 输入框和清空按钮类 |
| search-input | 输入框类 |
| clear-icon  | 清空按钮类 |
| dropdown-list | 搜索下拉列表类 |
| dropdown-item | 搜索下拉列表子项类 |
| item-text | 搜索下拉列表子项标题类 |

## 兼容性

| 平台 | 兼容性 |
| --- | --- |
| H5 | ✅ 支持 |
| App (iOS) | ✅ 支持 |
| App (Android) | ✅ 支持 |
| 微信小程序 | ✅ 支持 |
| 支付宝小程序 | ✅ 支持 |
| 百度小程序 | ✅ 支持 |
| 字节跳动小程序 | ✅ 支持 |
| QQ小程序 | ✅ 支持 |

## 开发说明

### 组件结构

hbis-search-input/ ├── src/ │ └── hbis-search-input.vue # 组件源码 ├── index.ts # 组件入口 ├── package.json # 包配置 └── README.md # 组件文档

### 开发环境

- Vue 3 + TypeScript
- Vite
- UniApp

### 构建命令

```bash
# 构建整个组件库
pnpm run build

示例

完整示例

```vue
<template>
	<div class="container">
		<h1>hbis-search-input 组件简单测试</h1>
		<div class="input-container">
		<hbisSearchInput :list="dataList" placeholder="请输入" :defaultValue="chosenData" @select="handleSelect"
	@search="handleSearch" @clearIcon="clear" :onFocusShowList="true" :maxHeight="120" :enter-search="true"
	ref="search" />	</div>

	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import hbisSearchInput from '../../../packages/components/hbis-search-input/src/hbis-search-input.vue';
	const dataList = ref([{
		label: '1',
		value: 0
	}, {
		label: '床前明月光',
		value: 1
	}, {
		label: '吃葡萄不吐葡萄皮',
		value: 2
	}, {
		label: 'good good study',
		value: 3
	}, {
		label: '测试44',
		value: 4
	}, {
		label: '河钢测试',
		value: 5
	}

]);
	const chosenData = ref('');
	const clear = () => {
		chosenData.value = ''
	};
	// 处理选择
	const handleSelect = (item) => {
		chosenData.value = item.name || '';
	};
	// 处理搜索
	const handleSearch = (searchText, filteredList) => {
		console.log('搜索关键词:', searchText);
		chosenData.value = searchText || '';
		console.log('筛选结果:', filteredList);
	};
</script>

<style scoped>
	.container {
		max-width: 800px;
		margin: 0 auto;
		padding: 20px;
		font-family: Arial, sans-serif;
	}

	h1 {
		color: #333;
		margin-bottom: 20px;
		text-align: center;
	}

	.input-container {
		margin-bottom: 20px;
		text-align: center;
	}
</style>

## 注意事项

1. list搜索列表子项需要有name元素作为筛选项
2. 组件默认全屏显示，建议通过v-if控制其显示/隐藏
3. 在UniApp中使用时，确保正确引入组件

## 更新日志

### v1.0.0

- ✅ 初始版本发布
- ✅ 支持自定义搜索列表、搜索方法
- ✅ 支持自定义提示语
- ✅ 支持自定义显示/隐藏清空按钮


## 许可证

ISC

## 贡献

欢迎提交 Issue 和 Pull Request！

## 联系方式

如果有任何问题或建议，欢迎通过以下方式联系：

- Email: [[email protected]](mailto:[email protected])
---

**HBIS UNI Components Library**

*打造高质量的 UniApp 组件库*