• Stars
    star
    364
  • Rank 117,101 (Top 3 %)
  • Language
    JavaScript
  • Created about 10 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件,必须使用于按钮式下拉菜单组件上。

Code Climate

Bootstrap Search Suggest

Demo|示例

这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件,必须使用于按钮式下拉菜单组件上。

NPM version node version npm download gemnasium deps GitHub issues GitHub forks GitHub stars

浏览器支持

  • 支持 ie8+,chrome,firefox,safari

功能说明

  • 搜索方式:从 data.value 的有效字段数据中查询 keyword 的出现,或字段数据包含于 keyword 中
  • 支持单关键字、多关键字的输入搜索建议,多关键字可自定义分隔符
  • 支持按 data 数组数据搜索、按 URL 请求搜索和按首次请求URL数据并缓存搜索三种方式
  • 单关键字会设置 data-id 和输入框内容两个值,以 indexId/idField 和 indexKey/idFiled 取值 data 的数据为准;多关键字只设置输入框值

快速上手

  1. 引入 jQuery、bootstrap.min.css、bootstrap.min.js
  2. 引入插件js: bootstrap-suggest.min.js
  3. 初始化插件
$("input#test").bsSuggest({
    url: "/rest/sys/getuserlist?keyword="
});

具体使用请参考参数配置说明及 demo 示例页面源码(Demo)

NPM 方式

bootstrap-suggest-plugin

require('bootstrap-suggest-plugin');
//import from 'bootstrap-suggest-plugin';

$("#test").bsSuggest({
    url: "/rest/sys/getuserlist?keyword="
});

使用示例

方法调用

  1. 禁用提示: $("input#test").bsSuggest("disable");
  2. 启用提示: $("input#test").bsSuggest("enable");
  3. 销毁插件: $("input#test").bsSuggest("destroy");
  4. 查看版本:$("input#test").bsSuggest("version");

事件监听

  1. onDataRequestSuccess: 当 AJAX 请求数据成功时触发,并传回结果到第二个参数
  2. onSetSelectValue:当从下拉菜单选取值时触发,并传回设置的数据到第二个参数
  3. onUnsetSelectValue:当设置了 idField,且自由输入内容时触发(与背景警告色显示同步)
  4. onShowDropdown:下拉菜单显示时触发
  5. onHideDropdown:下拉菜单隐藏式触发

示例参考

$("#test").bsSuggest('init', {
    url: "/rest/sys/getuserlist?keyword=",
    effectiveFields: ["userName", "email"],
    searchFields: [ "shortAccount"],
    effectiveFieldsAlias:{userName: "姓名"},
    clearable: true,
    idField: "userId",
    keyField: "userName"
}).on('onDataRequestSuccess', function (e, result) {
    console.log('onDataRequestSuccess: ', result);
}).on('onSetSelectValue', function (e, selectedData, selectedRawData) {
    console.log('onSetSelectValue: ', e.target.value, selectedData, selectedRawData);
}).on('onUnsetSelectValue', function () {
    console.log('onUnsetSelectValue');
}).on('onShowDropdown', function (e, data) {
    console.log('onShowDropdown', e.target.value, data);
}).on('onHideDropdown', function (e, data) {
    console.log('onHideDropdown', e.target.value, data);
});

更多详细用法,可参考 demo/index.htmldemo/demo.js 文件源代码,提供了自定义数据、URL 请求数据、百度搜索 API、淘宝搜索 API 的接口演示。

配置参数

参数列表中的值均为插件默认值

var defaultOptions = {
    url: null,                      //请求数据的 URL 地址
    jsonp: null,                    //设置此参数名,将开启jsonp功能,否则使用json数据结构
    data: {
        value: []
    },                              //提示所用的数据,注意格式
    indexId: 0,                     //每组数据的第几个数据,作为input输入框的 data-id,设为 -1 且 idField 为空则不设置此值
    indexKey: 0,                    //每组数据的第几个数据,作为input输入框的内容
    idField: '',                    //每组数据的哪个字段作为 data-id,优先级高于 indexId 设置(推荐)
    keyField: '',                   //每组数据的哪个字段作为输入框内容,优先级高于 indexKey 设置(推荐)

    /* 搜索相关 */
    autoSelect: true,               // 键盘向上/下方向键时,是否自动选择值
    allowNoKeyword: true,           // 是否允许无关键字时请求数据
    getDataMethod: 'firstByUrl',    // 获取数据的方式,url:一直从url请求;data:从 options.data 获取;firstByUrl:第一次从Url获取全部数据,之后从options.data获取
    delayUntilKeyup: false,         // 获取数据的方式 为 firstByUrl 时,是否延迟到有输入时才请求数据
    ignorecase: false,              // 前端搜索匹配时,是否忽略大小写
    effectiveFields: [],            // 有效显示于列表中的字段,非有效字段都会过滤,默认全部有效。
    effectiveFieldsAlias: {},       // 有效字段的别名对象,用于 header 的显示
    searchFields: [],               // 有效搜索字段,从前端搜索过滤数据时使用,但不一定显示在列表中。effectiveFields 配置字段也会用于搜索过滤
    twoWayMatch: true,              // 是否双向匹配搜索。为 true 即输入关键字包含或包含于匹配字段均认为匹配成功,为 false 则输入关键字包含于匹配字段认为匹配成功
    multiWord: false,               // 以分隔符号分割的多关键字支持
    separator: ',',                 // 多关键字支持时的分隔符,默认为半角逗号
    delay: 300,                     // 搜索触发的延时时间间隔,单位毫秒
    emptyTip: '',                   // 查询为空时显示的内容,可为 html
    searchingTip: '搜索中...',       // ajax 搜索时显示的提示内容,当搜索时间较长时给出正在搜索的提示
    hideOnSelect: false,            // 鼠标从列表单击选择了值时,是否隐藏选择列表
    maxOptionCount: 200,            // 选择列表最多显示的可选项数量,默认为 200

    /* UI */
    autoDropup: false,              //选择菜单是否自动判断向上展开。设为 true,则当下拉菜单高度超过窗体,且向上方向不会被窗体覆盖,则选择菜单向上弹出
    autoMinWidth: false,            //是否自动最小宽度,设为 false 则最小宽度不小于输入框宽度
    showHeader: false,              //是否显示选择列表的 header。为 true 时,有效字段大于一列则显示表头
    showBtn: true,                  //是否显示下拉按钮
    inputBgColor: '',               //输入框背景色,当与容器背景色不同时,可能需要该项的配置
    inputWarnColor: 'rgba(255,0,0,.1)', //输入框内容不是下拉列表选择时的警告色
    listStyle: {
        'padding-top': 0,
        'max-height': '375px',
        'max-width': '800px',
        'overflow': 'auto',
        'width': 'auto',
        'transition': '0.3s',
        '-webkit-transition': '0.3s',
        '-moz-transition': '0.3s',
        '-o-transition': '0.3s'
    },                              //列表的样式控制
    listAlign: 'left',              //提示列表对齐位置,left/right/auto
    listHoverStyle: 'background: #07d; color:#fff', //提示框列表鼠标悬浮的样式
    listHoverCSS: 'jhover',         //提示框列表鼠标悬浮的样式名称
    clearable: false,               // 是否可清除已输入的内容

    /* key */
    keyLeft: 37,                    //向左方向键,不同的操作系统可能会有差别,则自行定义
    keyUp: 38,                      //向上方向键
    keyRight: 39,                   //向右方向键
    keyDown: 40,                    //向下方向键
    keyEnter: 13,                   //回车键

    /* methods */
    fnProcessData: processData,     //格式化数据的方法,返回数据格式参考 data 参数
    fnGetData: getData,             //获取数据的方法,无特殊需求一般不作设置
    fnAdjustAjaxParam: null,        //调整 ajax 请求参数方法,用于更多的请求配置需求。如对请求关键字作进一步处理、修改超时时间等
    fnPreprocessKeyword: null       //搜索过滤数据前,对输入关键字作进一步处理方法。注意,应返回字符串
};

提示:

  • 在 bootstrap v4 下, clearabletrue 时,应引入 font-awesome 图标库,该清除按钮使用了 fa-plus 图标。

二次开发

git clone 项目,进入项目目录,执行如下命令:

  1. 安装grunt npm install grunt-cli -g
  2. 安装依赖 yarnnpm install
  3. 实时开发 npm start
  4. 执行测试 npm test
  5. 执行编译 npm run build

提示:对于 phantomjs 的依赖,如下载超时,可使用其他工具下载,然后放到命令行提示的目录,解压,将解压的目录重命名为命令行提示正在解压的名称。然后重新执行 npm install

Note on Patches / Pull Requests

  • Fork the project.
  • Make your feature addition or bug fix.
  • Send me a pull request. Bonus points for topic branches.

License

bootstrap-suggest-plugin is released under the MIT license.

该插件由志文工作室开发和维护。

More Repositories

1

chatgpt-sites

ChatGPT 网站导航。搜集国内可用的 ChatGPT 在线体验免费网站列表。定时任务每日更新
TypeScript
1,620
star
2

webp-batch-convert

webp 图片批量转换。将 png/jpg/bmp 格式的图片批量转换为 webp 格式。
TypeScript
66
star
3

scoop-proxy-cn

适合中国大陆的 Scoop buckets 代理镜像库。从多个开源 bucket 仓库同步更新,包含应用 1.6w+。
Batchfile
43
star
4

jquery_search_suggest_plugin

jQuery 搜索建议插件
JavaScript
31
star
5

ajax-data-model

ajax 通用数据请求处理模型。提供 ajax 请求、数据缓存、通用性接口约定处理等能力
JavaScript
15
star
6

console-log-colors

Console log colors helper for simple useage. Without any dependence.
JavaScript
14
star
7

asmd-calc

简单小巧支持浮点数精度的 JS 四则运算工具方法库
TypeScript
12
star
8

60s-php

60s读世界PHP版。支持 API 接口、移动版页面、docker部署
CSS
11
star
9

dir-fast-copy

nodejs 实现的文件夹快速复制工具。适用于对存在海量小文件的目录进行选择性复制的需求场景。
TypeScript
9
star
10

simple-mock

以注入到 node server 的 API 代理方式,实现简洁的 API MOCK 功能
TypeScript
6
star
11

fed-lint-helper

前端项目编码质量 Lint 检测辅助工具。
TypeScript
5
star
12

dedecms_jqm_template

dedecms织梦内容管理系统手机版模板,基于jquery mobile 开发
JavaScript
5
star
13

get-physical-address

Try get the physical address(hardware MAC address) of the hosts network interfaces.
TypeScript
4
star
14

pipicms_locoy_interface

pipicms皮皮影视系统火车头发布模块及免登陆接口
PHP
4
star
15

m3u8-dl

Batch download of m3u8 files
TypeScript
4
star
16

homebrew-cn

适合中国大陆用户使用的 Homebrew 应用代理镜像库
Ruby
3
star
17

vm-gh-proxy-cn

GitHub 访问代理助手。一个适合中国大陆用户使用的浏览器油猴脚本。
JavaScript
3
star
18

animate.css-jquery

javascript(jQuery) helper for animate.css, let the animation in the JavaScript to use more simple.
JavaScript
3
star
19

jquery-auto-hide-cursor

这是一个用于自动隐藏鼠标指针的 jQuery 插件。
HTML
2
star
20

strip-loader

A simple webpack loader to strip custom debug statements from your code.
TypeScript
2
star
21

fe-utils

前端 node、web 项目开发常用的工具函数集合。
TypeScript
2
star
22

lxxhjoke

离线笑话应用
Java
2
star
23

duplicate-file-cleaner

一个基于 Node.js 的重复文件删除小工具。
TypeScript
2
star
24

blog-examples

博客地址:https://lzw.me
JavaScript
1
star
25

static-server

一个基于 nodejs 的简易静态服务器,方便随时开发调试使用。
TypeScript
1
star
26

ql-scripts

支持青龙面板的脚本集
TypeScript
1
star
27

node-exchange-mailer

基于 node-ews 封装的 EWS 邮件发送 API 方法。
TypeScript
1
star
28

git-helper

一个简单的 git commit 等操作的辅助小工具
JavaScript
1
star
29

chatgpt-nav

AI 聊天绘图在线工具网址导航
TypeScript
1
star
30

eye-care-vscode-theme

一个自定义的 vscode 主题(集)
1
star
31

git-repo-sync

TypeScript
1
star
32

feps-webpack-plugin

This plug-in is used for function execution performance statistics. It calculates the execution time by injecting statistical code and finds slow functions.
JavaScript
1
star
33

cron-tasks

A simple cron tasks manager based on Node.js
JavaScript
1
star