# jquery search select

**Repository Path**: devin-alan/jquery-search-select

## Basic Information

- **Project Name**: jquery search select
- **Description**: jquery 支持拼音搜索的选择插件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2016-04-18
- **Last Updated**: 2022-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

Jquery search select是基于Jquery开发的一个带搜索的select插件，本插件可根据后台返回的文本和拼音实现选项的搜索查找。在开发时参考了老外编写的类似插件然后结合easy ui combobox组件的api, 意在提高插件的易用度。
插件依赖于jQuery 1.11或者更高的版本,浏览器需支持html5，在使用时需要对select加上一个唯一的id。
在需要的页面导入jquery和本插件即可
导入css
```
<link rel="stylesheet" href="css/combo.select.css">
```
导入js
```
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery-select.js"></script>  
```
# Usage 1:
对于写在页面中的select只需添加data-toggle="select"就可快速使用，当然可以增加拼音data-pinyin属性来支持拼音搜索。
```
<label for="demo1">local Select:</label>
<select id="demo1" data-toggle="select" style="width:150px">
    <option value="1" data-pinyin="zs">张三</option>
    <option value="2" data-pinyin="lisi">李四</option>
    <option value="3" data-pinyin="ww">王五</option>
    <option value="4" data-pinyin="eg">二狗</option>
</select>
```
# Usage 2:
使用本地数据创建select，数据参考如下
```
var json=[
    {
        "id": "1",
        "name": "sunyu",
        "pinyin": "sy"
    },
    {
        "id": "2",
        "name": "lisi",
        "pinyin": "ls"
    },
    {
        "id": "3",
        "name": "zhangsan",
        "pinyin": "zs"
    },
    {
        "id": "4",
        "name": "wangwu",
        "pinyin": "ww"
    }
];
```
使用数据渲染
```
<select id="demo2" data-toggle="select" style="width:150px"> </select>

//js代码
 $("#demo2").select({
    localData:json,
    emptyMsg:'未找到查询结果',
    valueField:'id',
    textField:'name',
    //placeholder:'==请选择==',
    pinyinField:'pinyin',
    onSelect:function(value,text){
        console.log("value:"+value);
        console.log("text:"+text);
    }		
});
```
# Usage 3:
使用ajax请求远程数据来渲染创建
```
<select id="demo3" data-toggle="select" style="width:150px"> </select>

$("#demo3").select({
    url:'xx'
    type:'post'
    dataType:'json'
    emptyMsg:'未找到查询结果',
    valueField:'id',
    textField:'name',
    params:{
        name:'lisi'
    },
    //placeholder:'==请选择==',
    pinyinField:'pinyin',
    onSelect:function(value,text){
        console.log("value:"+value);
        console.log("text:"+text);
    }   
 });
```
# 配置项说明
1. url是用于请求远程数据是指定url的，url的优先级高于localData
2. type是用于指定远程请求的方式，默认是get
3. dataType是远程请求数据使用的类型
4. params是远程请求用于指定请求参数的配置
5. localData是用于加载本地的json数据，优先级低于url
6. setDefaultSelect是用于设置默认选中，默认是false
7. selectMaxWidth是用于指定选择框的宽度，默认是200
8. emptyMsg是用于自定指定未搜索到记录时的提示
9. placeholder是用于设置自定义的站位符
10. valueField是用于指定解析数据用于设置select value值的字段名
11. textField是用于指定解析数据用于设置select text值的字段名 
12. pinyinField是用于指定解析数据中用于pingyin搜索的字段名，该设置不是必须
13. optgroup用于设置使用需要对select分组，默认是false即普通的select，如果设置为true则需要配置groupLabelField
14. groupLabelField用于设置option label值的解析字段名
15. optionsDataFiled是用于当组件启用optgroup时指定的分组子选项值数组字段数据
# 回调方法事件说明
1. onSelect(value, text, optData)方法是鼠标选中某一下拉选项的回调事件，value值选中项的值，text是选中项的文本，optData是选中select对应的整个完整数据
2. onLoadSuccess(xhr) 方法是用于指定远程加载前的事件
3. success(data) 方法是用于指定数据加载成功后的事件
4. error()远程数据请求发生错误时的回调事件
# 开放接口说明
1. getText()方法用于获取选中项的文本，使用参考$mySel.select("getText")
2. getValue()方法用于获取选中项的值，使用参考$mySel.select("getValue")
3. checked(value)方法用于根据具体的value绑定选中项，使用参考 $mySel.select('checked',2)
4. getData()方法用于获取选中项绑定的完整数据，使用参考$mySel.select('getData')
# Gulp构建
## 安装gulp
如果对于第一次使用gulp，则需要安装gulp。
```
npm install -g gulp  //-g表示全局安装
```
## 安装基本插件
```
npm install --save-dev
```
## 安装gulp-load-plugins和gulp-cssnano
gulp-load-plugins用于统一加载插件，gulp-cssnano用于处理css
```
npm install gulp-load-plugins --save-dev
npm install gulp-cssnano --save-dev
```
## 启动项目
```
gulp
```
## 访问项目
gulp监听dest目录，example中的例子构建后都将输出到dest目录
```
http://localhost:8080/demo1.html
```