如何在 AdminLTE v3 中使用侧边栏搜索插件答案

【问题标题】：How to use Sidebar Search Plugin in AdminLTE v3如何在 AdminLTE v3 中使用侧边栏搜索插件
【发布时间】：2021-07-06 01:15:01
【问题描述】：

在我的项目中，我使用来自 https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.0.5/js/adminlte.min.js 的 AdminLTE，但它没有加载 SidebarSearch.js。

如何在我的项目中使用这个插件？有没有人有一个简单的例子给我看，因为在文档本身中并不清楚如何使用这个插件。

主要在这一点上：

$('[data-widget="sidebar-search"]').SidebarSearch('toggle')

我应该把这行代码放在 HTML / JS 的什么地方？

【问题讨论】：

标签： adminlte

【解决方案1】：

要回答您的问题，只需将其添加到页面结束正文标记之前的脚本标记中，例如：

<html>
  <head>
    ...
  </head>
  <body>
    ...
    <script>
      $(document).ready(function()
      {
        // Example to toggle dropdown list of the search bar
        $('[data-widget="sidebar-search"]').SidebarSearch('toggle');

        // Example to initialize the plugin with options
          let options = {
          arrowSign: '/',
          minLength: 2,
          highlightClass: 'text-yellow',
          notFoundText: 'No results'
          ...
        };

        ("[data-widget="sidebar-search"]").SidebarSearch(options);
      });

    </script>
  </body>
</html>

但是这个方法似乎返回了重复的结果。

首选方法

只需将选项作为属性添加到 data-widget="sidebar-search" 旁边。

它应该看起来像这样data-not-found-text='No results' data-highlight-class='text-yellow' data-min-length='2'

adminLTE documentation

【讨论】：