Semantic-UI 菜单输入内容

Semantic-UI是一种流行的前端框架，它提供了各种用于创建响应式、美观的界面和互动组件的工具。其中之一是菜单组件，本文将介绍如何在菜单组件中添加输入内容。

添加输入框

通过添加<div class="ui right aligned category search item">，可以在菜单中添加右对齐的输入框。然后，可以通过<input class="prompt">指定输入框类型为提示框。这里的提示框会根据输入内容自动搜索并显示相关结果。

示例代码:

<div class="ui menu">
  <a class="item" href="#">首页</a>
  <a class="item" href="#">产品</a>
  <a class="item" href="#">服务</a>
  <div class="right menu">
    <div class="ui right aligned category search item">
      <div class="ui icon input">
        <input class="prompt" type="text" placeholder="搜索...">
        <i class="search icon"></i>
      </div>
      <div class="results"></div>
    </div>
  </div>
</div>

预览:

改变搜索结果

默认情况下，菜单中输入框的搜索结果不会有太大变化。但是，可以通过JavaScript代码改变搜索结果数据源和显示方式。

首先，在<div class="ui right aligned category search item">中添加<div class="menu">元素，以将搜索结果显示为菜单形式。在该元素中，可以添加任意数量的<div class="item">来显示搜索结果。

JavaScript代码应当在页面加载后执行。代码中有两部分，一是设置搜索结果数据源，二是在输入框内输入内容时更新搜索结果并显示。

示例代码:

<div class="ui menu">
  <a class="item" href="#">首页</a>
  <a class="item" href="#">产品</a>
  <a class="item" href="#">服务</a>
  <div class="right menu">
    <div class="ui right aligned category search item">
      <div class="ui icon input">
        <input class="prompt" type="text" placeholder="搜索...">
        <i class="search icon"></i>
      </div>
      <div class="results">
        <div class="menu"></div>
      </div>
    </div>
  </div>
</div>

<script>
$(function() {
  $('.ui.search')
    .search({
      source: [
        { title: '谐音宠物狗', url: 'https://www.baidu.com/s?wd=谐音宠物狗' },
        { title: '谐音鲜榨果汁', url: 'https://www.baidu.com/s?wd=谐音鲜榨果汁' },
        { title: '谐音潜力股', url: 'https://www.baidu.com/s?wd=谐音潜力股' },
        { title: '谐音节约用水', url: 'https://www.baidu.com/s?wd=谐音节约用水' },
        { title: '谐音减肥塑形', url: 'https://www.baidu.com/s?wd=谐音减肥塑形' }
      ],
      onSelect: function(result, response) {
        window.location.href = result.url;
      }
    })
  ;
})
</script>

预览:

返回markdown格式代码如下：

# Semantic-UI 菜单输入内容

Semantic-UI是一种流行的前端框架，它提供了各种用于创建响应式、美观的界面和互动组件的工具。其中之一是菜单组件，本文将介绍如何在菜单组件中添加输入内容。

## 添加输入框

通过添加`<div class="ui right aligned category search item">`，可以在菜单中添加右对齐的输入框。然后，可以通过`<input class="prompt">`指定输入框类型为提示框。这里的提示框会根据输入内容自动搜索并显示相关结果。

示例代码：

```html
<div class="ui menu">
  <a class="item" href="#">首页</a>
  <a class="item" href="#">产品</a>
  <a class="item" href="#">服务</a>
  <div class="right menu">
    <div class="ui right aligned category search item">
      <div class="ui icon input">
        <input class="prompt" type="text" placeholder="搜索...">
        <i class="search icon"></i>
      </div>
      <div class="results"></div>
    </div>
  </div>
</div>

预览：

改变搜索结果

默认情况下，菜单中输入框的搜索结果不会有太大变化。但是，可以通过JavaScript代码改变搜索结果数据源和显示方式。

首先，在<div class="ui right aligned category search item">中添加<div class="menu">元素，以将搜索结果显示为菜单形式。在该元素中，可以添加任意数量的<div class="item">来显示搜索结果。

JavaScript代码应当在页面加载后执行。代码中有两部分，一是设置搜索结果数据源，二是在输入框内输入内容时更新搜索结果并显示。

示例代码：

<div class="ui menu">
  <a class="item" href="#">首页</a>
  <a class="item" href="#">产品</a>
  <a class="item" href="#">服务</a>
  <div class="right menu">
    <div class="ui right aligned category search item">
      <div class="ui icon input">
        <input class="prompt" type="text" placeholder="搜索...">
        <i class="search icon"></i>
      </div>
      <div class="results">
        <div class="menu"></div>
      </div>
    </div>
  </div>
</div>

<script>
$(function() {
  $('.ui.search')
    .search({
      source: [
        { title: '谐音宠物狗', url: 'https://www.baidu.com/s?wd=谐音宠物狗' },
        { title: '谐音鲜榨果汁', url: 'https://www.baidu.com/s?wd=谐音鲜榨果汁' },
        { title: '谐音潜力股', url: 'https://www.baidu.com/s?wd=谐音潜力股' },
        { title: '谐音节约用水', url: 'https://www.baidu.com/s?wd=谐音节约用水' },
        { title: '谐音减肥塑形', url: 'https://www.baidu.com/s?wd=谐音减肥塑形' }
      ],
      onSelect: function(result, response) {
        window.location.href = result.url;
      }
    })
  ;
})
</script>

预览：