Bootstrap输入建议库 autosuggest.js

原创 2015年12月22日 19:24:59

轻量级输入提示控件auto suggest.github地址:https://github.com/androiddevelop/autosuggest.js。首先看一下下面例子:

http://example.codeboy.me/autosuggest/index.html


autosuggest.js

适用于Bootstrap的Ajax输入建议控件(Demo)

bootcomplete.js的基础上大幅度改进,改动如下:

  1. 文本框是去焦点时自动隐藏输入提示组件
  2. 增加最大建议数目限制(maxNum)
  3. 增加键盘方向键选择
  4. 增加文本对齐选择(align)
  5. 增加回车触发函数(nextStep)
  6. 增加以分隔符分割的联想(split)

依赖

基本使用

$('#input').autosuggest({url:'/search.php'});

json数据格式(必须)

[ 
  {
   "id" : someId, 
   "label" : "some label name"
  }
]

如果服务端返回数据非此种格式,请修改。

参数

url:

提交请求地址, 可以是json文件,注意跨域问题

method(非必须):

请求方式(getpost), 默认get

queryParamName(非必须):

传递当前输入框的值时的参数名称,默认 query,即如果是get方式并保持该值为默认值,则请求url为 xxx.com?query=input_value ,如果设置此值为 search ,则url为 xxx.com?search=input_value

align(非必须):

对齐方式,默认左对齐,可选项 left , center , right

wrapperClass(非必须):

包围输入框外层div的css样式

自动补全菜单的css样式,如果需要自定义请提供

minLength(非必须):

发起请求的最小长度,只有>= 此长度时才会出现建议框,默认最小长度为 2

maxNum(非必须):

最大建议数目,默认最多给出 10 个建议提示

highlight(非必须):

是否高亮显示匹配内容, 默认 false

split(非必须):

分隔符, 例如我们需要文本框中输入多个省份,使用逗号分开,那么我们可以设定 split 为 , , 之后 autosuggest.js 会根据最后一个逗号后面的内容进行建议. 默认为 null ,即把文本框中所有输入视为一个文本进行建议.

nextStep(非必须):

选中建议词后,建议框消失,之后点击回车要执行的函数。

extra(非必须):

除了queryParam之外的其他参数. 使用:

 "key1" : "value1",
 "key2" : "value2"

例子

//简单实例
$("#test").autosuggest({
    url: 'city.json',
    queryParamName: 'search',
});

//复杂实例
$("#test").autosuggest({
    url: 'city.json',
    minLength: 1,
    maxNum: 3,
    align: 'center',
    queryParamName: 'search'
    method: 'post',
    queryParamName: 'search',
    extra: {
        "key1": "value1",
        "key2": "value2"
    },
    nextStep: function () {
        alert("test");
    },
    split: ' '
});

有任何问题,欢迎发送邮件到app@codeboy.me交流。


jQuery自动填充插件 Cool Auto-Suggest

插件描述:这是一个利用jQuery实现的自动填充插件。支持ID字段,支持为下拉条目添加缩略图和描述,支持选中条目时就提交表单。这个插件还提供了一个基于PHP的服务端实现。 JQuery Cool...
  • momode27
  • momode27
  • 2016年02月25日 16:26
  • 308

Solr智能提示autosuggest

solr的智能提示autosuggest是需要依赖spell-check组件的,但是autosuggest和spell-check又是有区别的,下面的内容是从《solr in action》摘抄下来的...
  • ystyaoshengting
  • ystyaoshengting
  • 2015年11月11日 14:32
  • 946

使用AutoSuggest Behavior实现自动提示功能

开发运行环境:JDeveloper 11.1.2.4 + Oracle Database XE 11gR2 自动提示功能是页面上非常常见的一个功能。 本文以InputText组件为例,来说明如...
  • Beckben
  • Beckben
  • 2014年08月20日 21:25
  • 483

[jQuery套件]自動完成–AutoSuggest

本質    本質上AutoSuggest jQuery套件是一款用於解決欄位文字輸入自動完成的Js套件。AutoSuggest jQuery較不同之處在於它較一般自動完成的jQuery套件小,縮...
  • ForeverCjl
  • ForeverCjl
  • 2014年03月05日 15:40
  • 1336

Bootstrap Search Suggest 插件使用

Bootstrap 搜索建议插件 bootstrap combox 搜索建议插件 这是一个基于 boo...
  • leeyue_1982
  • leeyue_1982
  • 2015年10月07日 16:50
  • 18914

一个简单的基于Javascript的auto suggest 输入框联想控件

  • 2009年07月07日 09:41
  • 11KB
  • 下载

Bootstrap Search Suggest 使用的例子

Bootstrap Search Suggest 官方说明文档如下:suggest说明文档 由于该文档没有详细说明怎么运用到实际的项目中,特别是怎么将数据库中的值显示到页面上,所以我再运用到项目中,...
  • u011900448
  • u011900448
  • 2016年12月20日 18:57
  • 2146

jQuery自动填充插件JQuery Cool Auto-Suggest

  • 2014年05月13日 13:21
  • 107KB
  • 下载

bootstrap-suggest-plugin (bsSuggest) 联想搜索插件之——中文字符在IE下POST 时乱码现象解决方案

bootstrap-suggest-plugin (bsSuggest) 联想搜索插件之——中文字符在IE下POST到后台 时乱码现象 解决方案...
  • yushangbincheng
  • yushangbincheng
  • 2017年04月20日 16:49
  • 1156

bootstrap suggest 前端输入框下拉提示、搜索建议插件

http://www.open-open.com/lib/view/open1415932442211.html
  • fay462298322
  • fay462298322
  • 2016年08月25日 16:34
  • 971
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrap输入建议库 autosuggest.js
举报原因:
原因补充:

(最多只允许输入30个字)