更新记录

1.0.1（2022-12-14） 下载此版本

展示搜索结果时，点击空白处，可隐藏搜索结果。

1.0.0（2022-11-02） 下载此版本

第一个版本

平台兼容性

特别声明：该组件是在https://ext.dcloud.net.cn/plugin?id=1377的基础上扩展而来，扩展的功能是支持搜索结果的分页。感谢原作者！

例子

<template>
    <view style="padding-top: 120px;padding-bottom: 500px;" @tap="wrapClick">

            <input-search-select
              ref="inputSearchSelectRef"
            @handleSearchMore = "handleSearchMore"
            @handleSearch = "handleSearch"
            @handleSelect = "handleSelect"
            placeholder = "请输入"
            :infoList = "infoList"
            :fieldName = "fieldName"
            v-model = "searchValue"
            :loadStatus = "loadStatus"
            ></input-search-select>

        </view>
</template>

<script>
    import inputSearchSelect from '../../components/input-search-select/input-search-select'
        export default {
            components:{inputSearchSelect},
            data() {
                return {
                queryParams:{ //查询参数
                  pageNo:1,
                  pageSize:6,
                },
                    loadStatus: 'loading',//加载状态  loading、noMore、more   其中more表示还有下一页数据
                    fieldName: 'name', // 需要显示的数据字段名，根据实际需要修改
                    searchValue: '测试数据2',//输入框里的值
                    infoList: [],//搜索结果的数据集合

                }
            },
            methods:{
            wrapClick(){
              //隐藏搜索结果组件
              this.$refs.inputSearchSelectRef.closeSearchResult();
            },
            query(){
              const self  = this;
              this.loadStatus = 'loading';
              // 将setTimeout改成接口调用
              setTimeout(() => {
                let tempIndex = (this.queryParams.pageNo - 1) * this.queryParams.pageSize;
                let res = {
                  total:12,
                  data:[
                    {name: `测试数据${tempIndex+1}`},
                    {name: `测试数据${tempIndex+2}`},
                    {name: `测试数据${tempIndex+3}`},
                    {name: `测试数据${tempIndex+4}`},
                    {name: `测试数据${tempIndex+5}`},
                    {name: `测试数据${tempIndex+6}`},
                  ]
                }
                if (res.total <= this.queryParams.pageNo * this.queryParams.pageSize) {
                  self.loadStatus = 'noMore';
                } else {
                  self.loadStatus = 'more';
                }
                self.infoList = self.infoList.concat(res.data || []);

              }, 5000)
            },
                handleSearchMore() {
                //第N>1次搜索
                this.queryParams.pageNo += 1;
                this.query();

                },
            handleSearch(){
              //  第一次搜索
              this.infoList = []; //搜索结果置空
              this.queryParams.pageNo = 1; //置为初始值1
              this.query();
            },
                handleSelect(val){
                  //从搜索结果中选中某个选项时触发
                    console.log(val.name)
                }
            }
        }

</script>

<style>
</style>