seblhaire/tagsinput

一个 Laravel 库，带有 jQuery 扩展，可以添加由自动完成器选择的标签（Bootstrap 徽章）。

维护者

详细信息

github.com/seblhaire/tagsinput

主页

源代码

问题

安装: 43

依赖项: 0

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 0

开放问题: 0

3.3.0 2024-03-13 18:52 UTC

Requires

MIT 7e10a83cc67e75987c85c0f5f9bfe8afb5ae79c7

  • Sébastien L'haire <sebastien.woop@lhaire.org>

This package is auto-updated.

Last update: 2024-09-13 19:59:54 UTC

README

由 Sébastien L'haire 编写

一个 Laravel 库，带有 jQuery 扩展，可以添加由自动完成器选择的标签（Bootstrap 徽章）。

它使用

Taginput

演示网站可在 此处 获取。

安装

  1. composer require seblhaire/tagsinput
  2. Composer 会自动将包与 Laravel 连接。但您还可以明确地将提供者和外观添加到您的 config/app.php
  'providers' => [
    ...
      Seblhaire\Autocompleter\AutocompleterServiceProvider::class,
      Seblhaire\Tagsinput\TagsinputServiceProvider::class,
      ...
    ],
    'aliases' => [
        ...
        "AutocompleterHelper" => Seblhaire\Autocompleter\AutocompleterHelper::class,
        'TagsinputHelper' => Seblhaire\Tagsinput\TagsinputHelper::class
      ]
  1. 发布包（可选）。
$ php artisan vendor:publish
  1. 有关 JavaScript 和样式表，请参阅下一节。

JavaScript 和样式表

在网页上，每个 JS 库和 CSS 样式表都可以单独链接。如果您选择这种方法，首先下载并安装上述库。然后按照上述说明发布包文件，并在您的模板中放置以下标签

<script type="text/javascript" src="js/vendor/seblhaire/autocompleter/autocompleter.js"></script>
<script type="text/javascript" src="js/vendor/seblhaire/tagsinput/tagsinput.js"></script>
<link rel="stylesheet" type="text/css" property="stylesheet" href="css/vendor/seblhaire/autocompleter/autocompleter.css"/>
<link rel="stylesheet" type="text/css" property="stylesheet" href="css/vendor/seblhaire/tagsinput/tagsinput.css"/>

但是，网站通常使用许多库和样式表，浏览器必须下载许多文件才能正确渲染网站。现代网站包含单个压缩的 JavaScript 文件，其中包含必要的脚本；样式表也遵循相同的原则。在 Laravel 中，您可以使用 Laravel Mix 编译文件。

使用 NPM 包管理器： npm install bootstrap jquery

然后您的 JavaScript 源文件应类似于以下内容

global.jQuery = require('jquery');
var $ = global.jQuery;
var jQuery = global.JQuery;
window.$ = $;
window.jQuery = jQuery;
require('bootstrap');
require('../../vendor/seblhaire/autocompleter/resources/js/autocompleter.js');
require('../../vendor/seblhaire/tagsinput/resources/js/tagsinput.js');

对于您的样式表

@import '~bootstrap/scss/bootstrap';
@import "../../vendor/seblhaire/autocompleter/resources/css/autocompleter";
@import "../../vendor/seblhaire/tagsinput/resources/css/tagsinput";

配置文件

Tagsinput 库是可定制的。默认值可以在配置文件中更改，或者通过在 Facade 函数中传递选项（见下一节）来更改。如果您想修改默认配置文件，发布包文件并访问 config/autocompleter.php 和 config/tagsinput.php。

用法

Tagsinput 包包含一个简单的 Facade。

TagsinputHelper::init

初始化一个 tagsinput 对象和一个可以传递到视图中的自动完成器对象。

TagsinputHelper::init($divid, $label, $url, $optionsAc, $optionsTags) 其中

  • $divid：包含标签输入组件的 <div> 的标识符；
  • $label：标签输入组件的标签；
  • $url：必须由自动完成器用于加载数据的路由。请参阅 seblhaire/autocompleter
  • $optionsAc：自动完成组件选项；选项数组。请参阅 seblhaire/autocompleter。选项 'helptext' 会自动覆盖。选项 'callback' 默认由 Tagsinput 组件设置，但如果需要，您也可以编写自己的回调函数。
  • $optionsTags：选项数组。
    • 'maindivclass'：主组件 <div> 的类。默认：'form-group row'。
    • 'divlabelclass'：包含组件标签的 <div> 的类。默认：'col-sm-2'。
    • 'divacclass'：包含自动完成组件的 <div> 的类。默认：'col-sm-3'。
    • 'divtaglist'：包含标签的 <div> 的类。默认：'col-sm-7'。
    • 'inputcontainerclass'：包含 <input> 标签和按钮的 <div> 的类。默认：'input-group'。
    • 'addbuttoncontainerclass'：包含 <button> 标签的 <div> 的类。默认：'input-group-append'。
    • 'addbuttonclass'：用于 <button> 的类。默认： 'btn btn-primary'。
    • 'buttonlabelclass'：用于 <button> 标签的类。默认：'fas fa-plus-circle'。
    • 'taglistclass'：包含标签列表的 <ul> 标签的类。默认：'taglist'。
    • 'tagclass'：标签的类。默认：'bg-primary'。
    • 'tagremovebtnclass'：包含标签移除按钮的 <i> 标签的类。默认：'fas fa-trash-alt'。
    • 'helptextclass'：包含帮助文本的 <p> 标签的类。默认：'taginputhelper'。 'helptext' 文本用于显示帮助。文本可以是字符串或翻译键。参见 以下。
    • 'showaddbutton'：切换显示添加元素按钮。默认：true。
    • 'addbuttoncallback'：当点击添加新元素时必须触发的函数名称。例如：此回调应显示表单以添加信息。默认：null。
    • 'tagaddcallback'：当添加新标签时必须触发的函数名称。默认：null。示例函数：var showlist = function(tag, data, object){...} 其中
      • tag 是 <span> 元素的对象；
      • data 是附加到标签的数据（由 Autocompleter 返回）；
      • object 是 taginput JavaScript 对象。
    • 'tagremovecallback'：当删除标签时必须触发的函数名称。默认：null。函数参数与 tagaddcallback 类似。
    • 'taglabelelement'：包含要显示在标签中的文本的自动完成结果行中的字段名称。默认：'taglabel'。参见 seblhaire/autocompleter。
    • tagclasselement：自动完成结果行中可以用于设置特殊标签类的字段名称（而不是默认类）。默认：tagclass。
    • 'field'：包含数据标识符或键的结果行中的字段名称。默认：'id'.参见 seblhaire/autocompleter。
    • 'checkunicity'：指定标签列表中的值是否必须唯一。如果为 true，则如果选择了相同的标签两次，则忽略第二次，并且不会将其添加到列表中。默认：true。
    • hiddeninput：自动插入隐藏输入。此输入将包含 Tagsinput 以逗号分隔的结果。隐藏输入的名称由 Tagsinput 对象的 id 后跟 "-result" 组成。

总结：在您的控制器中插入

$tagszone = TagsinputHelper::init(
      "tagzone",
      'Employee',
      route('tagsinputsearch'),
      [
        'resdivstyle' => [ //position autocompleter result list
          'width' => '430px',
          'top' => '-18px'
        ],
      ],
      [ /* tagslist options */ ]
    );
    ...
    return view('tagsinput', [
      ...
      'tagszone' => $tagszone,
      ...
      ]);

在您的 blade 模板中，在您希望显示标签列表的位置插入以下内容

{!! $tagszone !!} 或 {!! $tagszone->output() !!}

输出方法

output()

此 output() 方法打印标签并输出 tagsinput 和 autocompleter 初始化脚本。它使用上述方法，您也可以按您希望的任何方式组织代码。

printLabel()

此方法打印标签 <div>。

printAutocompleter()

此方法打印自动完成区域。

printTagList()

此方法打印标签列表区域。

printHelpText()

此方法打印帮助文本区域。

printAcCallback()

打印用于将新标签添加到列表的自动完成回调。

printTagInputInit()

打印自动完成器和标签输入对象的初始化。最好在 jQuery(document).ready 条件中插入。

printHiddenInput()

打印包含 tagsinput 以逗号分隔输出的隐藏输入。

以下方法可用于管理标签列表并将标签列表以不同格式发送到其他脚本。

printReset()

清空标签列表。

printCount()

返回当前标签列表的大小。

printGetArrayValues()

返回包含标签列表值的数组。例如：["CH","FR"]

printGetCommaSepValues()

返回一个以逗号分隔的包含标签列表值的字符串。例如：CH,FR。如果 hiddeninput 值为 true，则此列表将自动插入隐藏输入。

printSerialize($champ)

返回可以用于在 JavaScript 字符串中发送值的序列化值。在 blade 模板中，例如，您可以写入

<script>
let params = {!! $tagszone->printSerialize('country') !!}`
</script>

将输出类似以下内容：let params = jQuery('#tagzone_taglist').data('tagsinput').serialize('country'); 变量 params 的内容将是：country[]=CH&country[]=FR

printAddToList($varia)

此方法可用于在页面初始化或通过 Ajax 脚本加载数据后预先添加值到标签列表。 $varia 可以是一个简单的 Json 对象或对象的数组。 {code:'CH', taglabel:'CH: Switzerland'} 是一个包含两个字段的对象：code 标识标签值，这是将返回到标签列表中的唯一标识符。这是选项 field 的值，参照上述内容。 taglabel 是将在标签中显示的标签，对应选项 taglabelelement。对象数组是方括号 [] 中用逗号分隔的对象字符串。参照以下示例。在 blade 模板中插入

<script type="text/javascript">
    jQuery(document).ready(function() {
      {!! $tagszone->printAddToList("[{code:'CH', taglabel:'CH: Switzerland'},{code:'FR', taglabel:'FR: France'}]")!!};
    });
   ...

这将输出以下代码中的字符串：jQuery('#tagzone_taglist').data('tagsinput').addtolist([{code:'CH', taglabel:'CH: Switzerland'},{code:'FR', taglabel:'FR: France'}]); 当然，您可以从数据库中检索动态值并预先填充表单以编辑数据库条目。

翻译键

Laravel 在处理过程中非常早期地加载配置文件。因此，配置文件不能包含 __('translation.key')。为了解决这个问题，我们创建了一个助手函数，可以直接打印字符串或将翻译键发送给翻译助手。翻译键可以用字符 # 分隔。例如："#tagsinput::messages.tagshelp#"。原始翻译存储在 vendor/seblhaire/tagsinput/resources/lang 之下。如果您发布了包文件，您可以在 resources/lang/vendor/tagsinput/ 中找到翻译。

请随意将键翻译成您自己的语言，并将它发送给作者或提交一个合并请求到 GitHub。

有疑问？贡献？

请随意发送功能请求或合并请求给作者，或者简单地提出问题。