分类显示搜索结果 - 实施

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

下面我们按照分类搜索结果去改造一下这个 Search 模块里的配置 .. 先在这个配置对象里添加一个 type 属性 .. 把它的值设置成 category ... 意思是我们要使用分组显示搜索结果 ..

再去改一下这个 onResponse 这个回调函数 .. 分类搜索结果里的 results 的值是一个对象 .. 把数组改成对象 ..

同样使用 $.each 去处理一下服务端给我们响应回来的 wpResponse .. 先去定义一个变量 .. 命名为 type ..

type: 'category',

它的值可以是我们要进行分类的根据 .. 先看一下这个返回来的结果 .. 在这里 .. 我们可以按照 format 这个属性的值进行分类 .. format 是文章的格式 .. 比如有标准,有日志,有图像 .. 在发布文章的时候可以选择这个格式 ..

默认的文章的格式都会是 standard .. 再回到编辑器 . 让 type 等于 item.format .. 这个 item.format 就是刚才你看到的文章的格式 ..

或者,如果没有这个 format 属性 .. 我们让 type 的值等于 其它 ..

var type = item.format || '其它';

然后我们需要根据 item.format ,也就是文章的格式去创建搜索结果里的分组 .. 先判断一下 .. 看一下 response.results[type] 是不是等于 undefined .. 如果是说明我们的改造的搜索结果里面还没有这个分类 ... 这样我们就去创建一个 .. response.results[type] .. 它的值是一个对象 .. 在这个对象里,需要用一个 name 属性 .. 设置一下分类的名字 .. 这里可以使用 type 来表示 ..

然后还有一个 results 属性 .. 它的值是一个数组 .. 这个 results 里的东西就是属于当前这个分类里的搜索结果 ..

在下面,我们再往这个数组里添加一些东西 .. response.results[type].results .. 使用 push 去添加东西 .. 添加的是一个对象,在这个对象里,设置一下 title 标题,description 描述 .. 还有 url 搜索结果的地址 ..

最后再返回这个处理之后的 response .. 这样 Search 模块会去利用这个 response 里的内容去显示搜索结果 ..

保存 .. 在浏览器上去试一下 ... 搜索一个东西 .. 这次返回的搜索结果会按照服务端响应回来的数据里面的 format 这个属性的值,去分组显示搜索的结果 ..

分类显示搜索结果 - 实施《 Semantic UI 应用接口 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点