Semantic-UI 菜单搜索内容

Semantic-UI 是一个优秀的前端框架，拥有丰富的组件和功能，其中之一是菜单搜索内容。通过 Semantic-UI 的菜单搜索内容功能，用户可以轻松地在一个复杂的菜单中找到自己需要的内容，并快速跳转到对应的页面。

实现方法

Semantic-UI 的菜单搜索内容功能是通过添加一个搜索框和相关的 JavaScript 代码来实现的。下面是实现菜单搜索内容的步骤和示例代码：

步骤1：添加搜索框

首先，在菜单组件中添加一个搜索框的 HTML 代码，如下所示：

<div class="ui search">
  <div class="ui left icon input">
    <input class="prompt" type="text" placeholder="Search...">
    <i class="search icon"></i>
  </div>
  <div class="results"></div>
</div>

上面的代码中，.ui.search 是一个包含搜索框和搜索结果的容器，.ui.left.icon.input 是一个包含输入框和图标的容器，.prompt 是输入框的样式，.search.icon 是搜索框右侧的图标，.results 是搜索结果的容器。

步骤2：添加 JavaScript 代码

接下来，需要添加一些 JavaScript 代码来实现搜索功能。下面是示例代码：

$(document).ready(function() {
  $('.ui.search')
    .search({
      source: content_list,
      searchFields   : [
        'title',
        'description'
      ],
      searchFullText: false
    })
  ;
});

上面的代码中，.ui.search 是前面 HTML 中添加的搜索框容器，content_list 是存储菜单内容的 JavaScript 对象，title 和 description 是需要搜索的字段，searchFullText 控制是否精确匹配。

步骤3：准备数据

最后，需要准备菜单内容的数据。下面是一个简单的例子：

var content_list = [
  {
    title       : 'About Us',
    description : 'Information about our company and its history',
    url         : '/about-us'
  },
  {
    title       : 'Products',
    description : 'Browse our products and place an order',
    url         : '/products'
  },
  {
    title       : 'Contact Us',
    description : 'Get in touch with us and send us a message',
    url         : '/contact-us'
  }
];

上面的代码中，content_list 是一个包含菜单内容的 JavaScript 数组，每个元素都包含一个标题、描述和 URL。

结论

通过 Semantic-UI 的菜单搜索内容功能，用户可以快速轻松地在菜单中搜索内容并跳转到对应的页面。我们需要做的就是添加一个搜索框、一些 JavaScript 代码和菜单内容的数据。希望这篇文章对你有所帮助！