# selectInput

**Repository Path**: yangguanweinisi/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**: 0
- **Forks**: 27
- **Created**: 2021-06-06
- **Last Updated**: 2021-06-06

## 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', // 渲染初始化默认值
            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();

   // 如果使用本地数据加载，不要使用设置远程 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
      });
```

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

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

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



### 2020-12-08更新

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

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

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