## 搜索模式



### 默认搜索

:::demo 默认按照`name`进行搜索
```html
<div id="demo1" class="xm-select-demo"></div>

<script>
var demo1 = xmSelect.render({
    el: '#demo1', 
    filterable: true,
    data: [
        {name: '水果', value: 1},
        {name: '蔬菜', value: 2},
        {name: '桌子', value: 3},
        {name: '北京', value: 4},
    ]
})
</script>
```
:::


### 重写搜索方法

:::demo 
```html
<div id="demo2" class="xm-select-demo"></div>

<script>
var demo2 = xmSelect.render({
    el: '#demo2', 
    filterable: true,
    filterMethod: function(val, item, index, prop){
        if(val == item.value){//把value相同的搜索出来
            return true;
        }
        if(item.name.indexOf(val) != -1){//名称中包含的搜索出来
            return true;
        }
        return false;//不知道的就不管了
    },
    data: [
        {name: '水果', value: 1},
        {name: '蔬菜', value: 2},
        {name: '桌子', value: 3},
        {name: '北京', value: 4},
    ]
})
</script>
```
:::


### 搜索延迟

为了提高有效搜索, 当停止输入`500ms`后才开始进行过滤搜索, 当然这个`500`你也可以进行修改

:::demo `delay: 2000` 输入停止2s后进行搜索过滤
```html
<div id="demo3" class="xm-select-demo"></div>

<script>
var demo3 = xmSelect.render({
    el: '#demo3', 
    filterable: true,
    delay: 2000,
    data: [
        {name: '水果', value: 1},
        {name: '蔬菜', value: 2},
        {name: '桌子', value: 3},
        {name: '北京', value: 4},
    ]
})
</script>
```
:::


### 自定义搜索 (远程搜索)

第一步: 需要先开启搜索 `filterable: true,`

第二步: 开启自定义搜索 `remoteSearch: true`

第三部: 重写搜索回调

简单吧, 记得Star ^_^

:::demo `render`后, 就会进行一次回调, 用于渲染第一次数据
```html
<div id="demo4" class="xm-select-demo"></div>

<script>
var demo4 = xmSelect.render({
    el: '#demo4', 
    filterable: true,
    remoteSearch: true,
    remoteMethod: function(val, cb){
        //这里模拟3s后返回数据
        setTimeout(function(){
            //需要回传一个数组
            cb([
                {name: '水果' + val, value: val + 1},
                {name: '蔬菜' + val, value: val + 2},
                {name: '桌子' + val, value: val + 3},
                {name: '北京' + val, value: val + 4},
            ])
        }, 3000)
    },
    data: []
})
</script>
```
:::
