苹果cmsv10下拉菜单站内搜索教程

发布时间：2024-11-02共14人阅读

苹果CMS V10模板中提供了多种搜索接口，除了常用的影片搜索之外，还可以实现文章、专题、明星以及角色等不同类型的数据搜索。

常见的搜索地址可以通过 mac_url() 函数生成，具体标签如下：

{:mac_url('vod/search')}//影片搜索接口
{:mac_url('art/search')}//文章搜索接口
{:mac_url('topic/search')}//专题搜索接口
{:mac_url('actor/search')}//明星搜索接口
{:mac_url('role/search')}//角色搜索接口

苹果CMS默认搜索框代码

苹果CMS默认模板中的搜索功能通常使用 form 和 input 实现，默认情况下主要调用影片搜索接口 {:mac_url('vod/search')}。

常见的默认搜索框代码如下：

<form id="search" name="search" method="get" action="{:mac_url('vod/search')}">
    <input type="text" name="wd" class="search-input mac_wd" value="{$param.wd}" placeholder="请在此处输入影片名或演员名称" />
    <input type="submit" id="searchbutton" class="search-button mac_search" value="搜索影片" />
</form>

其中，wd 是搜索关键词参数，用户输入影片名称、演员名称等关键词后，提交表单即可进入影片搜索页面。

苹果CMS实现下拉选择搜索类型

如果希望在一个搜索框中增加搜索类型选择功能，可以使用 select 下拉菜单，让用户自行选择影片、文章、专题、明星或者角色，然后通过 JavaScript 动态跳转到对应的搜索接口。

HTML部分可以按照下面的方式编写：

<input class="text_box" id="wd" name="wd" type="text" placeholder="关键词">
<input type="button" id="search" name="search" value="搜索" />

<select class="select_box ng-untouched ng-pristine ng-valid" name="selectType">
    <option class="item" value="{:mac_url('vod/search')}">影片</option>
    <option class="item" value="{:mac_url('art/search')}">文章</option>
    <option class="item" value="{:mac_url('topic/search')}">专题</option>
    <option class="item" value="{:mac_url('actor/search')}">明星</option>
    <option class="item" value="{:mac_url('role/search')}">角色</option>
</select>

这里的 selectType 用于保存用户选择的搜索类型，每个 option 的 value 则对应苹果CMS不同的数据搜索接口。

搜索按钮JavaScript代码

HTML完成之后，还需要通过JavaScript获取用户选择的搜索类型和输入的关键词，然后拼接搜索地址并跳转。

对应的JavaScript代码如下：

<script>
    $(function(){
        $('#search').click(function(){
            var mid = $("select[name='selectType'] option:selected").val();
            var sUrl = mid + '?wd=' + $('#wd').val();
            window.location.href = sUrl;
        });
    });
</script>

代码实现原理

这段代码的实现方式比较简单，主要分为三个步骤。

1、获取搜索类型

首先获取下拉菜单中当前选中的 option：

var mid = $("select[name='selectType'] option:selected").val();

例如用户选择“影片”，获取到的就是 {:mac_url('vod/search')} 所生成的搜索地址；选择“文章”则获取文章搜索地址，以此类推。

2、获取搜索关键词

通过下面的代码获取搜索框中输入的内容：

$('#wd').val()

这里的 #wd 对应搜索框的 id="wd"。

3、拼接搜索地址并跳转

最后将搜索接口和 wd 参数组合起来：

var sUrl = mid + '?wd=' + $('#wd').val();
window.location.href = sUrl;

例如用户选择影片搜索，并输入关键词后，最终会形成类似下面的请求结构：

影片搜索地址?wd=搜索关键词

浏览器随后通过 window.location.href 跳转到对应的苹果CMS搜索页面。

苹果CMS多类型搜索框的优势

传统苹果CMS模板通常只提供影片搜索，如果网站同时使用了影视、文章、专题、明星和角色等功能，那么增加搜索类型下拉菜单后，用户可以在同一个搜索框中选择不同的数据类型。

  • 影片：搜索影视视频内容。

  • 文章：搜索网站文章或资讯内容。

  • 专题：搜索专题数据。

  • 明星：搜索演员、明星相关数据。

  • 角色：搜索影视角色相关数据。

这样可以减少页面上重复的搜索入口，同时让搜索功能更加灵活。

使用时需要注意的问题

原始代码中的专题搜索 option 标签存在引号不完整的问题，应该写成：

<option class="item" value="{:mac_url('topic/search')}">专题</option>

另外，JavaScript代码依赖页面已经加载jQuery。如果模板没有加载jQuery，点击搜索按钮时不会执行上述代码。

搜索关键词直接拼接到URL中时，也建议根据网站实际需求考虑特殊字符、空关键词等情况，避免产生无效的搜索地址。

总结

苹果CMS V10不仅可以调用影片搜索接口，还提供文章、专题、明星和角色等搜索地址。通过 select 下拉菜单结合JavaScript，可以把多个搜索入口整合到一个搜索框中。

实现方式的核心就是选择搜索接口 → 获取关键词 → 拼接 wd 参数 → 跳转搜索页面。对于需要同时搜索多种内容类型的苹果CMS影视网站，这种方式可以进一步完善模板的搜索功能和用户体验。

相关标签