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

2025-04-20 共人阅读

苹果CMS V10 默认模板的搜索功能主要通过 form 和 input 实现，默认使用影片搜索接口。通过增加下拉选择框，可以让用户在搜索时选择不同的搜索类型，例如影片、文章、专题、明星和角色，从而实现一个多条件搜索框。

一、苹果CMS V10 搜索标签

苹果CMS V10 提供了多个搜索接口，可以根据不同内容类型调用对应的搜索地址：

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

其中，{:mac_url('vod/search')} 是默认模板中常见的影片搜索接口。其他接口则可以用于实现文章、专题、明星以及角色等不同类型的搜索。

二、默认影片搜索框代码

默认模板通常通过 GET 表单提交搜索关键词，搜索关键词使用 wd 参数传递：

<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>

这种方式只能固定提交到影片搜索接口。如果希望用户自行选择搜索类型，就可以增加 select 下拉菜单，并根据用户选择的搜索类型动态修改搜索地址。

三、增加下拉选择搜索条件

下面的代码增加了一个搜索类型下拉框，用户可以在搜索之前选择影片、文章、专题、明星或角色：

<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 V10 搜索地址。

四、JavaScript 实现动态搜索

选择搜索类型后，需要通过 JavaScript 获取下拉框当前选中的地址，再将搜索关键词通过 wd 参数提交到对应搜索接口：

<script>
$(function(){
    $('#search').click(function(){
        var sUrl = $("select[name='selectType'] option:selected").val();
        var keyword = $('#wd').val();

        if(!keyword){
            return;
        }

        var url = sUrl + '?wd=' + encodeURIComponent(keyword);
        window.location.href = url;
    });
});
</script>

五、代码工作原理

整个搜索过程主要分为三个步骤。

用户在输入框中填写搜索关键词。
用户通过下拉菜单选择搜索类型，例如影片、文章或明星。
JavaScript 获取对应的搜索地址，并将关键词作为 wd 参数提交。

例如用户选择“影片”，系统会使用 {:mac_url('vod/search')} 作为搜索地址；如果选择“明星”，则会使用 {:mac_url('actor/search')}，最终形成对应的搜索请求。

六、搜索关键词参数说明

wd 是苹果CMS搜索中常用的关键词参数。代码中的：

<input class="text_box" id="wd" name="wd" type="text" placeholder="关键词">

用于获取用户输入的关键词，JavaScript 再通过：

$('#wd').val()

取得输入框内容，并使用 encodeURIComponent() 对关键词进行URL编码后提交，可以减少中文、空格及特殊字符出现在URL中时产生的问题。

七、使用时需要注意

{:mac_url('vod/search')}、{:mac_url('art/search')} 等属于苹果CMS模板标签，需要在模板环境中解析。
不同苹果CMS版本或二次开发模板的搜索控制器可能存在差异，实际使用前应确认对应搜索地址可正常访问。
搜索关键词建议使用 encodeURIComponent() 进行URL编码。
如果搜索按钮使用 button，需要通过JavaScript执行跳转；如果改成标准 form 提交，则需要同步调整表单的 action。
如果网站已经使用了 id="search"，应避免页面中出现重复ID，以免影响JavaScript事件绑定。

八、总结

通过苹果CMS V10 的 mac_url 标签结合 select 下拉菜单和 JavaScript，可以将默认的单一影片搜索框扩展为多类型搜索框。用户可以根据需求选择影片、文章、专题、明星或角色，再输入关键词进行搜索，从而提升网站搜索功能的灵活性和用户体验。

标签：搜索