作为前端开发，使用uniapp框架，使用picker控件，做一个可以通过输入字符模糊搜索下拉列表的控件，写成一个独立控件，并且把调用方式也写上

好的，下面是一个完整的基于uniapp框架的独立控件示例，包括了模糊搜索功能和调用方式：

1. 在`components`目录下创建一个新的文件夹，例如`search-picker`，并在该文件夹中创建以下文件：

- `search-picker.vue`：控件的模板文件
- `search-picker.js`：控件的逻辑文件
- `search-picker.json`：控件的配置文件

2. 在`search-picker.vue`中编写控件的模板代码：

<template>
  <view>
    <input class="search-input" placeholder="输入关键字" @input="onInput" />
    <picker :value="value" @change="onChange">
      <view slot="header" class="picker-header">
        <text>{{title}}</text>
      </view>
      <view class="picker-content">
        <picker-view-column>
          <picker-view-row v-for="(item, index) in pickerData" :key="index">{{item}}</picker-view-row>
        </picker-view-column>
      </view>
    </picker>
  </view>
</template>

3. 在`search-picker.js`中编写控件的逻辑代码：

export default {
  name: 'SearchPicker',
  props: {
    title: {
      type: String,
      default: '请选择'
    },
    data: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      value: [],
      pickerData: this.data,
      originalData: this.data
    }
  },
  methods: {
    onInput(event) {
      const keyword = event.target.value;
      if (keyword) {
        const filteredData = this.originalData.filter(item => item.indexOf(keyword) >= 0);
        this.pickerData = filteredData;
      } else {
        this.pickerData = this.originalData;
      }
      this.value = [];
    },
    onChange(event) {
      this.$emit('change', event);
    }
  }
}

4. 在`search-picker.json`中配置控件的样式：

{
  "component": true,
  "usingComponents": {},
  "style": {
    "search-input": {
      "border": "1px solid #ccc",
      "border-radius": "5px",
      "padding": "5px",
      "margin-bottom": "10px"
    },
    "picker-header": {
      "background-color": "#f5f5f5",
      "height": "40px",
      "line-height": "40px",
      "text-align": "center"
    },
    "picker-content": {
      "height": "200px"
    }
  }
}

5. 在需要使用控件的页面中引入`search-picker`组件，并在`data`中定义下拉列表的数据：

<template>
  <view>
    <search-picker :data="cityData" @change="onPickerChange"></search-picker>
  </view>
</template>

<script>
import SearchPicker from '@/components/search-picker/search-picker.vue';

export default {
  components: {
    SearchPicker
  },
  data() {
    return {
      cityData: ['北京', '上海', '广州', '深圳', '杭州', '南京']
    };
  },
  methods: {
    onPickerChange(event) {
      console.log('picker value changed', event);
    }
  }
};
</script>

6. 最后，需要在`pages.json`文件中声明`search-picker`组件：

"usingComponents": {
  "search-picker": "@/components/search-picker/search-picker"
}

这样就完成了一个基于uniapp框架的模糊搜索下拉列表控件。调用方式是在需要使用控件的页面中，使用`search-picker`标签，并传入相应的属性和事件即可。