Laravel教程二十二 增强标签选择功能

前一节已经讲完了修改文章时同步标签的功能,但是我们选择标签使用的是多选下拉框,这个在实际使用的时候是很不方便的。比如我们的标签很多的时候,可能会遇到下面的情况:选择的时候忘记了按 Ctrl 键,导致之前所有选中的项都变成未选中状态,需要重新选择,这是一件很让人头疼的事。这一节就教大家花费5分钟的时间,利用一个小插件来解决此问题。

我们这里使用的 jQuery 插件叫做 Select2 。首先可以到它的示例页面来看一下其中的“Multiple select boxes”这一项,这就是我们要使用的,这个显然比直接使用多选下拉框要高大上的多。

首先复制 Select2 提供的 CDN :

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

把 CSS 和 JS 分别引入到 /resources/views/main.blade.php 文件的 </head> 之前和 </body>之前:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
 
</head>
<body>
    <div class="container">
        @include('flash::message')
 
        @yield('content')
    </div>
 
    <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
    <script type="text/javascript">
        $('#flash-overlay-modal').modal();
        // $('div.alert').not('.alert-important').delay(3000).slideUp(300);
    </script>
 
    @yield('footer')
</body>
</html>

注意:select2 需要依赖 jQuery,所以要确保在引入 select2 的 JS 之前先引入 jQuery。

然后打开 /resources/views/articles/_form.blade.php,给标签字段添加一个 ID 属性,修改后如下:

<div class="form-group">
    {!! Form::label('tag_list', 'Tags:') !!}
    {!! Form::select('tag_list[]', $tags, null, ['id' => 'tag_list', 'class' => 'form-control', 'multiple']) !!}
</div>

然后在该文件底部加入下面的代码:

@section('footer')
    <script type="text/javascript">
        $('#tag_list').select2();
    </script>
@endsection

保存之后到文章发布页或者编辑页试试效果吧~

Laravel教程二十二 增强标签选择功能

本节内容基本完事,下面多讲一些关于 Select2 的使用方法。

1) 为选择框添加 Placeholder 属性:

<script type="text/javascript">
    $('#tag_list').select2({
        placeholder : '请选择标签'
    });
</script>

2) 允许用户输入自定义标签:

<script type="text/javascript">
    $('#tag_list').select2({
        placeholder : '请选择标签',
        tags : true
    });
</script>

注意:由于我们的程序中没有实现自定义标签的功能,所以这里只是演示如何使用 select2 添加自定义标签,而具体功能的实现,有兴趣的朋友可以自己完成。

3) 添加默认标签:

<script type="text/javascript">
    $('#tag_list').select2({
        placeholder : '请选择标签',
        tags : true,
        data : [
            {id: 'one', text: 'jQuery'},
            {id: 'one', text: 'Ruby'},
        ]
    });
</script>

通过 data 属性添加的标签或与我们程序中的标签合并后显示。可以到页面查看实际效果。

4) 使用 AJAX 获取标签:

<script type="text/javascript">
    $('#tag_list').select2({
        placeholder : '请选择标签',
        tags : true,
        ajax : {
            dataType: 'json',
            url: 'api/tags',
            delay: 250,
            data: function(params){
                return {
                    q: params.term
                }
            },
            processResults: function(data){
                return { results: data }
            }
        }
    });
</script>

或者直接从文件中获取:

<script type="text/javascript">
    $('#tag_list').select2({
        placeholder : '请选择标签',
        tags : true,
        ajax : {
            dataType: 'json',
            url: 'tags.json',
            processResults: function(data){
                return { results: data }
            }
        }
    });
</script>

Laravel教程二十二 增强标签选择功能:等您坐沙发呢!

发表评论

表情
还能输入210个字