`

magicsuggest初体验。

    博客分类:
  • js
阅读更多
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对象,如果要重写其中的事件,只能采用上述的方法。


上面的方法是在提示列表中选了一项,然后提示框中的值发生改变了触发的;如果获取到提示框中有多个值,会用,(逗号)分开。
分享到:
评论

相关推荐

    magicsuggest.zip

    通过熟练掌握MagicSuggest的CSS和JS使用,开发者可以创建出高度定制化且用户友好的多选输入控件,提升Web应用的交互性和用户体验。 总的来说,MagicSuggest是一个强大且灵活的前端工具,它通过CSS和JS的完美结合,...

    前端项目-magicsuggest.zip

    总的来说,“magicSuggest”是一个强大且灵活的前端组件,它简化了开发具有自动提示和多选功能的输入框的过程,提高了用户体验。通过深入理解和定制这个组件,开发者可以在各种项目中实现高效的数据交互功能。

    magicsuggest:使用Bootstrap 3的多选组合框

    MagicSuggest v2.1.5 (修复)在关闭按钮前添加而不是添加(修复)使用当前的主代码更新magicsuggest-min.js (fea)动态更新最大选择大小MagicSuggest v2.0.0 MagicSuggest在这里有一个新家: ://nicolasbize....

    yii2-widgets-magicsuggest:yii2-widgets-magicsuggest

    要么跑 php composer.phar require --prefer-dist wayhood/yii2-widgets-magicsuggest "*"或添加 "wayhood/yii2-widgets-magicsuggest": "*"到composer.json文件的 require 部分。用法安装扩展后,只需通过以下方式...

    cmb2-magicsuggest-field:适用于WordPress的CMB2的MagicSuggest字段类型

    cmb2-magicsuggest将Nicolas Bize的转换为可添加到您的元框的自定义字段类型。 magicselect字段的作用与select / magicselect字段非常相似,但具有预输入样式的搜索,使您可以从建议列表中选择项目。 此字段也可以...

    jquery双列表框插件Bootstrap Dual Listbox

    1. **响应式布局**:该插件自动适应不同的设备和屏幕尺寸,确保在手机、平板和桌面电脑等不同设备上都有良好的用户体验。 2. **多选支持**:用户可以轻松地在两个列表框之间添加或移除项目,通过简单的点击或拖放...

    好用的带搜索的下拉复选框,可灵活改造

    "好用的带搜索的下拉复选框"是一种常见的组件,它在提高用户体验方面扮演着重要角色。这种组件通常用于数据筛选、多选选项选择等场景,尤其在面对大量数据时,集成搜索功能能极大提升用户的操作效率。 1. **下拉复...

    多选下拉框插件

    标题中的“多选下拉框插件”可能指的是一个特定的开源项目或产品,如MagiSuggest,这从压缩包子文件名"magicsuggest20160429"中可以看出。MagiSuggest是一个流行的选择框插件,它提供了多选和搜索功能,使用户能够...

    jQuery插件实现可输入和自动匹配的下拉框

    随着Web技术的发展,越来越多的开发者希望通过增强下拉框的功能来提供更好的用户体验。本文将详细介绍如何通过jQuery插件实现一个既可输入又具有自动匹配功能的下拉框。 首先,提到的是直接使用HTML5的新标签`...

Global site tag (gtag.js) - Google Analytics