更新记录

1.0.1（2026-03-09） 下载此版本

优化部分显示

1.0.0（2026-03-06） 下载此版本

完整版本上传

平台兼容性

uni-app(4.0)

SearchableSelect 组件说明

一个基于 uni-app 的可搜索下拉选择组件，用于替代 uni-data-select，增加 本地搜索筛选能力，适合客户、人员、项目等数据量较大的选择场景。

组件采用 原生 JavaScript + Vue 编写，结构简单，方便二次修改。

一、功能特性

• 支持 下拉选择
• 支持 本地关键字搜索
• 支持 v-model 双向绑定
• 支持 open / close / change 回调
• 可作为 uni_modules 插件使用
• 也可以直接复制到 components 目录使用
• 纯 JS 编写，可自由修改逻辑

二、引入方式

1 使用 uni_modules

在页面中引入：

import ranmoFilterSelectVue from '../../uni_modules/ranmo-filterSelect/components/ranmo-filterSelect/ranmo-filterSelect.vue';

使用：

<SearchableSelect
    v-model="customerId"
    :localdata="customList"
/>

2 使用 components

也可以直接放入：

/components/SearchableSelect.vue

然后在页面中引入：

import SearchableSelect from '@/components/SearchableSelect.vue'

注册组件：

components:{
    SearchableSelect
}

使用方式相同：

<SearchableSelect
    v-model="customerId"
    :localdata="customList"
/>

三、数据格式

localdata 数据结构与 uni-data-select 保持一致：

customList = [
    { value: 1, text: "客户A" },
    { value: 2, text: "客户B" },
    { value: 3, text: "客户C" }
]

四、组件参数

示例：

<SearchableSelect
    v-model="customerId"
    :localdata="customList"
    placeholder="请选择客户"
/>

五、事件回调

组件提供三个回调事件。

change

选择数据时触发。

<SearchableSelect
    v-model="customerId"
    :localdata="customList"
    @change="change"
/>

change(item){
    console.log(item)
}

返回数据：

{
    value: 1,
    text: "客户A"
}

open

下拉框打开时触发。

@open="onOpen"

onOpen(){
    console.log("下拉框打开")
}

close

下拉框关闭时触发。

@close="onClose"

onClose(){
    console.log("下拉框关闭")
}

六、示例

<SearchableSelect
    v-model="customerId"
    :localdata="customList"
    placeholder="请选择客户"
    @change="change"
    @open="onOpen"
    @close="onClose"
/>

七、组件优势

• 支持 关键字搜索筛选
• 使用方式与 uni-data-select 类似
• 代码结构简单
• 原生 JS 编写
• 可自由修改逻辑
• 适合 二次开发和定制需求

开发者可以根据项目需求 随意调整 UI、搜索逻辑或数据来源。