更新记录
1.0.2(2025-11-04) 下载此版本
新增关键字高亮,大小写严格匹配的功能
1.0.1(2025-04-23) 下载此版本
添加输入防抖
1.0.0(2025-02-13) 下载此版本
初始版本
查看更多平台兼容性
uni-app(4.0)
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| × | √ | √ | √ | √ | √ | √ | √ | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ | √ | √ | - | - |
uni-app x(4.0)
| Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
|---|---|---|---|---|---|
| - | - | - | - | - | - |
cl-autocomplete 输入框提示组件
组件作用
提供带搜索过滤功能的下拉选择组件,适用于以下场景:
- 输入时有提示数据
- 输入时实时过滤备选数据
Props 属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| options | Array | [] | 必填,选项数组(当前仅支持字符串数组) |
| v-model | String | '' | 输入框绑定值 |
| placeholder | String | '请选择' | 输入框占位文本 |
| maxHeight | [String, Number] | 300 | 下拉提示列表最大高度(单位:px) |
| placeholderStyle | String | '' | 自定义占位符样式(支持CSS字符串) |
| disabled | Boolean | false | 是否禁用输入框 |
| maxlength | Number | 20 | 最大输入长度 |
| hideBorder | Boolean | false | 是否隐藏输入框边框 |
| cursorSpacing | Number | 300 | 键盘弹起时光标距离输入框的高度(单位:px) |
| type | String | 'text' | 输入框类型,支持uni-easyinput所有类型(text/number/password等) |
| isStrict | Boolean | false | 是否启用严格模式,会区分大小写 |
| isHighlight | Boolean | false | 是否高亮展示关键字 |
| highlightColor | String | '#007aff' | 高亮颜色,需要isHighlight为true有效 |
| customFilter | Function | - | 自定义过滤方法 |
基本使用示例
<template>
<cl-autocomplete
v-model="searchText"
:options="fruitList"
placeholder="搜索水果"
max-height="400"
/>
</template>
<script setup>
const fruitList = ['Apple', 'Banana', 'Orange', 'Mango', 'Strawberry']
const searchText = ref('')
</script>

收藏人数:
下载插件并导入HBuilderX
下载示例项目ZIP
赞赏(0)
下载 60
赞赏 0
下载 10704347
赞赏 1797
赞赏
京公网安备:11010802035340号