# jqselector

> ### 简介

Latest version **1.1.0** (published 2018-05-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install jqselector
pnpm add jqselector
yarn add jqselector
bun add jqselector
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-05-16 |
| First published | 2018-03-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 899 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | qxchen |
| Maintainers | qxchen930911 |
| Keywords | selector, ajaxSelector, multipleSelector, node, easy |

## Links

- npm: https://www.npmjs.com/package/jqselector
- npm.io page: https://npm.io/package/jqselector

## Dependencies (7)

- [less](https://npm.io/package/less.md) ^3.0.1
- [css-loader](https://npm.io/package/css-loader.md) ^0.28.10
- [url-loader](https://npm.io/package/url-loader.md) ^0.6.2
- [less-loader](https://npm.io/package/less-loader.md) ^4.0.6
- [art-template](https://npm.io/package/art-template.md) ^4.12.2
- [art-template-loader](https://npm.io/package/art-template-loader.md) ^1.4.3
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^3.0.4

## Alternatives

- [@expo/fingerprint](https://npm.io/package/@expo/fingerprint.md) — 6.2M weekly downloads
- [@azure/monitor-opentelemetry-exporter](https://npm.io/package/@azure/monitor-opentelemetry-exporter.md) — 850.0K weekly downloads
- [@azure/monitor-opentelemetry](https://npm.io/package/@azure/monitor-opentelemetry.md) — 624.0K weekly downloads
- [@posthog/ai](https://npm.io/package/@posthog/ai.md) — 423.3K weekly downloads
- [fakefilter](https://npm.io/package/fakefilter.md) — 63.9K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2018-05-16
- 1.0.2 — 2018-05-16
- 1.0.1 — 2018-04-26
- 1.0.0 — 2018-03-06

## README

## jQselector.js [![Build Status](https://travis-ci.org/qxchen6/jq-selector.svg?branch=master)](https://travis-ci.org/qxchen6/jq-selector)

### 简介

    jQselector.js是一款简单的下拉框插件。
    支持单选，多选，本地搜索，远程（ajax）搜索，自定义主题。
    
### 快速开始

##### 安装    

1、引用文件的方式：
从/dist/prod/ 中 拷贝 jq-selector.js 文件至你的目录。

```js 
<script src='/your_path/jq-selector.js'></script> 
```
   
2、也可以使用npm

```npm
npm install jqselector
``` 

3、同样支持模块化

```js
require ('jqselector');
```   
   
##### HTML结构

    
```html
    
<div class='mySelectorContainer'>
    <!-- 这个div是容器，之后初始化的插件将会以这个容器的位置和尺寸进行适配，所以你可以给这个容器一个你喜欢的大小。jQselector会自动适应 -->
   <select name='perople' class='mySelector' multiple="multiple" >
   <!-- 如果你想使用多选功能，请给select添加multiple属性 -->
       <option></option>
   </select>   
</div>
     
```

##### 初始化

```js
    $('.mySelector').jQselector();
```

### 可选的配置项

```js
    jQselectorOptions =  {
        search:true,//boolean，是否启用搜索功能
        allowClose:true,//是否显示删除按钮，默认显示
        onChange:function(selectedData){ //function，当选中数据发生改变时的回调函数
        console.log(selectedData) 
        },
        remote:{//启用ajax搜索
	  	url:'api.mydomain.com',//请求的地址
	  	format:function(responseData){//响应数据的格式化处理，必须有返回值
	  	    //这里你应该将响应的数据处理成
	  	    //[{value:'xiaoming',text:'小明'}]
	  	    //的格式
	  	    //value是option的值，text是option的展示文本
	  		return responseData; //将处理后的数据返回给jQselector
	  		//如果你省略了这个函数，jQselector会直接使用响应的数据
          },
          delay:300 //输入延迟搜索，默认300ms
	  },
        colors:{
            //自定义主题色
            //这里的属性的值得格式为字符串
            //支持标准css属性
            //如 '#e6e6e6'，'RGBA(255,255,255,.5)','red'...
            front:'#333',//前景色，默认'#333'
            background:'#fff',//背景色，默认'#fff'
            selectedFront:'#000',//选中前景色，默认'#000'
            selectedBackground:'#e6e6e6'//选中背景色，默认'#e6e6e6'
        }
    };
```

---
_Source: https://npm.io/package/jqselector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._