# nimble-search

**Repository Path**: xkpro/nimble-search

## Basic Information

- **Project Name**: nimble-search
- **Description**: 基于 jQuery、bootstrap、flatpickr、typeahead.js 的搜索表单组件，适用于单体架构中后台前端
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-25
- **Last Updated**: 2024-07-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 展开与折叠功能的搜索表单组件

基于 `jQuery`、`bootstrap`、`flatpickr`、`typeahead.js` 的搜索表单组件，适用于单体架构中后台前端，主要包含以下功能：

-   展开与收起搜索表单
-   自动完成
-   `dropdown` 多级下拉菜单
-   `DatePicker` 组件

## 截图

![截图](./docs/images/nimble-search.png)

## 运行方式

克隆项目至本地

```bash
git clone https://gitee.com/xkpro/nimble-search.git project-name
```

## 安装依赖

```bash
cd ./project-name
npm i
```

## 启动应用

```bash
npm run start
```

## 打包分发

```bash
npm run build
```

## 使用方式

引入样式与脚本文件

```HTML
<link rel="stylesheet" href="nimble-search.css">
<script src="nimble-search.js"></script>
```

对象初始化

```js
// selector 表示 css 选择器
// options 是配置选项
var component = new NimbleSearch.Search(selector, options);
```

示例代码

```js
// 搜索表单元素类型
var ITEM_TYPE = NimbleSearch.ITEM_TYPE;
// 示例， 页面中指定 <div class="search"></div>
new NimbleSearch.Search('.search', {
    // 自动完成数据分词词典
    dict: ['搜索词1', '搜索词2'],
    // 表示自动完成数据源
    source: [{
        // key 与自动完成的 input name 保持一致
        // <input name="project" />
        key: 'project', data: [
            { label: '项目名称1', value: 1 },
            { label: '项目名称2', value: 2 },
            {...}
        ]
    }],
    // 表单项，支持 text、select、date-picker、dropdown、auto-complete 等类型
    items: [
        { label: '项目', inputName: 'project', type: ITEM_TYPE.AUTO_COMPLETE, defaultValue: '1' },
        { label: '分类', inputName: 'categoryId', type: ITEM_TYPE.SELECT, defaultValue: '1' },
        {
            label: '级联分类',
            inputName: 'categories',
            type: ITEM_TYPE.DROPDOWN,
            data: [
                { lable: '分类', value: 'a', children: [
                    { label: '子分类', value: 'a-1', children: [
                        { label: '子分类', value: 'a-1-1' }
                    ] }
                ] }
            ],
            // 默认选中 value 为 a-1-1 的项
            defaultValue: 'a-1-1'
        },
        { label: '日期', inputName: 'date', type: ITEM_TYPE.DATE_PICKER, defaultValue: '2023-11-11' },
        {
            label: '时间段',
            inputName: 'date-range',
            type: ITEM_TYPE.DATE_RANGE_PICKER,
            defaultValue: ['2024-01-05', '2024-01-26'],
        },
        {
            label: '关键词',
            inputName: 'keywords',
            type: ITEM_TYPE.TEXT,
            defaultValue: '...'
        }
    ],
    // 点击查询按钮事件
    onSearch: function(parameters) {
        // parameters 为从查询表单获取的参数与参数值
        // 查询请求模拟代码
        // ajax.get('http://koudingke.cn/controller/action?parameters={parameters}')
    }
});
```