magicsuggest初体验。

magicSuggest是一个自动提示插件且支持多选,下面是具体的使用过程(bootstrap):

1、首先在页面中引入magicSuggest的样式文件和js文件(需要bootstrap和JQuery库),这样子:

<link href="/assets/css/magicsuggest-min.css" rel="stylesheet">
<script src="/assets/js/magicsuggest-min.js"></script>


2、页面中添加一个div,例如下面这样子:

<div id="ms1" class="form-control" required></div>


3、再为magicSuggest初始化,是这样的:

var ms1 = $('#ms1').magicSuggest({
value:['A'],
placeholder:'请选择',
data:'/message/find',
queryParam:'str'
});


解释一下:

(1)value是出现在提示框中的值
(2)placeholder是提示,就是显示在文本框中的提示内容,类似于很多网页中的“请在此框中输入xx”
(3)data是数据源,上面写的数据源是去请求一个url,这个url返回的是json数据,如果不用根据输入内容去动态获取,写死就行了,就像value那样
(4)queryParam是插件根据输入的内容,然后把这个内容传到后台的名称。假如在提示框中输入了a,queryParam是str,数据源是一个url请求(data:'/message/find'),那么插件会自动把这个参数传递到后台(处不处理是自己的事),完整的链接是/message/find?str=a,后台可以这样获取:request.getParameter("str");。就是这样。

4、如果要获取提示框中的值就是这个样子:

$(ms1).on(
'selectionchange', function(e, cb, s){
var str = cb.getValue();

alert('提示框中的值为:'+str);
});
注意覆盖方法一律是此方法,如果采用
$('#ms1).magicSuggest().on('selectionchange', function(e, cb, s){
alert(cb.getValue());
});是不行的,为什么,可以由源码看出,magicsuggest返回的代码是return obj.data('magicSuggest');,返回的不是js对象,如果要重写其中的事件,只能采用上述的方法。


上面的方法是在提示列表中选了一项,然后提示框中的值发生改变了触发的;如果获取到提示框中有多个值,会用,(逗号)分开。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值