# selectInput

**Repository Path**: lengyuling/select-input

## Basic Information

- **Project Name**: selectInput
- **Description**: Layui select配合input实现可输入，可选择，可搜索，支持异步加载，远程搜索，也可以本地data直接赋值，主要使用场景是select框可以自己输入，就是在下拉列表里找不到自己想要的选项就可以自己输入，同时还要支持模糊匹配功能，数据源可以从本地赋值，也可以异步url请求加载，或者直接远程请求联想
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 27
- **Created**: 2021-03-17
- **Last Updated**: 2022-12-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### 使用说明

```html
 // 先定义一个容器
 <div id="test"></div>

```

```javascript

// 模块加载的机制不明白的或者加载不进来的，请参考layui官方文档或者自行百度
layui.config({ base: 'js/modules/' }).extend({
  selectInput: 'selectInput/selectInput'
}).use(['form', 'selectInput'], function() {
  var $ = layui.$, form = layui.form, selectInput= layui.selectInput;
           var ins = selectInput.render({
            // 容器id，必传参数
            elem: '#test1',
            name: 'test', // 渲染的input的name值
            initValue:'iPhone12 Pro Max', // 渲染初始化默认值
            hasSelectIcon: false,
            placeholder: '请输入名称', // 渲染的inputplaceholder值
            // 联想select的初始化本地值，数组格式，里面的对象属性必须为value，name，value是实际选中值，name是展示值，两者可以一样
            data: [
                {value: 1111, name: 1111},
                {value: 2333, name: 2222},
                {value: 2333, name: 2333},
                {value: 2333, name: 2333},
            ],
            url: "https://www.layui.com/", // 异步加载的url，异步加载联想词的数组值，设置url，data参数赋的值将会无效，url和data参数两者不要同时设置
            remoteSearch: false, // 是否启用远程搜索 默认是false，和远程搜索回调保存同步
            parseData: function (data) {  // 此参数仅在异步加载data数据下或者远程搜索模式下有效，解析回调，如果你的异步返回的data不是上述的data格式，请在此回调格式成对应的数据格式，回调参数是异步加载的数据

            },
            error: function (error) { // 异步加载出错的回调 回调参数是错误msg

            },
            done: function (data) { // 异步加载成功后的回调 回调参数加载返回数据

            },
            remoteMethod: function (value, cb) { // 远程搜索的回调函数
                // value 是input实施输入的value值
                // cb是回调处理函数，请在执行ajax搜索请求成功之后执行此回调函数

                //案例
                //这里如果val为空, 则不触发搜索
                if (!value) {
                    return cb([]);
                }
                //这里的$.ajax去请求后台拿回数据
                $.ajax({
                    method: 'get',
                    url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
                    data: {
                        keyword: val,
                    },
                    success: function (data) {
                        return cb(data)
                    }
                })
            }
        }
    });

    // 监听input 实时输入事件
    ins.on('itemInput(test1)', function (obj) {
        console.log(obj);
    });

    // 监听select 选择事件
    ins.on('itemSelect(test1)', function (obj) {
        console.log(obj);
    });

     // 获取选中的value值
    var selectValue = ins.getValue();
    
    // 清空输入框的value值
    ins.emptyValue();

   // 动态添加select选项，第二个默认为false，即为覆盖data重载，true为push追加
    ins.addSelect([
        {value: 1111, name: 1111},
        {value: 2333, name: 2222},
        {value: 2333, name: 2333},
        {value: 2333, name: 2333},
        {value: 6666, name: 9999},
        {value: 8888, name: 101010},
    ],false);

   // 如果使用本地数据加载，不要使用设置远程 url参数 也不要将remoteSearch参数设置为 true，完整的本地赋值数据案例

    var ins2 = selectInput.render({
            elem: '#test1',
            data: [
                {value: 1111, name: 1111},
                {value: 2333, name: 2222},
                {value: 2333, name: 2333},
                {value: 2333, name: 2333},
            ],
            placeholder: '请输入名称',
            name: 'list_common',
            remoteSearch: false
      });
 ```


 ** tips： 加url的那种异步加载适用的场景是：你的data数据需要在页面渲染的时候异步加载请求后台拿到数据，然后后续搜索是基于这个数据进行前端搜索的,所以url异步加载和data赋值模式两者互斥，而远程实时搜索这种和url异步加载/data赋值模式两者是互斥的，本质上url异步加载和data直接赋值都是前端基于已有的数据进行搜索，而远程实时搜索，前端不参与搜索匹配，而会调用你完成的remoteMethod远程搜索函数去后台搜索完后返回一个data列表渲染；parseData解析回调仅在url异步加载和远程实时搜索的时候有效，如果设置了，必须返回数据，否则页面无法进行搜索显示功能** 

>ps：有问题的话可以在评论区回复，会尽量完善这个组件的

#### 可以直接加入selectInput交流QQ群，有问题可以在里面提问
群名称：selectInput交流 
群号：809939644

### 2021-03-16更新

> 调整了之前的显示逻辑，选中点击下拉列表，input框始终显示用name值，而value则在getValue方法返回中，但是此处可能有用户自行输入的值，此时拿不到传入的对象里面的value值，只能返回实时input的value值，故新增实例参数invisibleMode，默认为false，此项参数如果为true在调用实例方法getValue方法时返回的是对象，如：{"value":"21111","isSelect":false}，对象属性value即为实例value值，而isSelect则表示是否是选中的值，而非用户自行输入的值

### 2021-01-12更新
> 新增实例方法：addSelect，用于动态添加select选项，addSelect方法接受两个参数，第一个参数是数组格式，和实例化参数data格式一致，第二个参数是添加的选项是重载还是push到已有data数组后面

### 2021-01-11更新
> 实例化新增参数：uniqueId，用于同个页面存在多个实例id不唯一的情况，如果不传的话，自动在时间戳id后面补上随机数

### 2021-01-10更新
> 实例化新增参数：hasSelectIcon，此参数非必传，如果传true的话，input框右边会显示select下拉显示图标，可以点击显示隐藏下拉列表，同时移动隐藏下拉列表会失效

### 2020-12-22更新
> 1: 新增实例方法：getValue， 获取获取选中的value值

> 2: 新增实例方法：emptyValue，清空输入框的value值



### 2020-12-08更新

> 1: 允许value和name值不同，显示用name，取值用value

> 2: 新增参数initValue，设置input默认初始值

> 3: 修复了一些已知的bug问题