苹果cms教程

苹果CMS V10下拉分类站内搜索功能开发教程

发布时间：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')}//角色搜索接口

二、系统默认单类型搜索框代码

系统原生搜索模板仅支持影片单一检索，通过form表单提交关键词，固定调用影片搜索接口，适合基础站点使用。

<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为全局搜索关键词参数，所有搜索类目统一适配该参数，输入关键词提交后即可匹配对应内容。

三、下拉多选搜索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参数记录用户选择的检索类型。

四、搜索跳转JS功能代码

依托jQuery实现动态获取搜索类目和关键词，自动拼接搜索链接并跳转页面，完成多功能检索逻辑。

<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、读取选中的搜索接口

通过JS抓取下拉菜单选中项的接口地址，精准匹配用户选择的搜索类目：

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

2、获取用户搜索关键词

读取输入框内的检索关键词，统一调用wd参数：

$('#wd').val()

3、拼接链接并跳转

将接口地址与关键词参数组合，生成完整搜索链接并自动跳转页面，完成检索操作：

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

六、多类型搜索功能优势

相较于系统默认的单一影片搜索，下拉分类搜索可覆盖站点全部内容模块，无需在页面布置多个搜索入口，界面更加简洁。各检索类目适配场景如下：

  • 影片：检索全站影视视频资源；

  • 文章：匹配站点资讯、图文文章内容；

  • 专题：快速查找各类影视专题合集；

  • 明星：检索演员、艺人相关资料与作品；

  • 角色：匹配影视角色相关关联内容。

七、部署注意事项

部署代码前需修正模板代码语法问题，确保所有option标签参数完整、引号闭合规范。该功能JS代码依赖jQuery环境，模板未预装jQuery会导致搜索功能失效，需提前引入对应依赖文件。同时可根据站点需求，增加空关键词拦截、特殊字符过滤等优化逻辑，避免生成无效搜索链接。

八、功能总结

苹果CMS V10多类目下拉搜索，核心是整合系统自带搜索接口，通过下拉选择器区分检索类型，配合JS动态拼接URL实现跳转。该改造方式简单高效，能够最大化利用系统原生功能，优化站点搜索体验，适配多功能综合影视站点使用。

相关标签