本地搜索

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

搜索的请求可以发送给远程服务端 .. 也可以是本地的搜索 .. 也就是你可以准备好一个静态的内容 .. 然后使用这个搜索框去搜索 ..

下面再去添加点 JavaScript .. 先找到页面上的这个搜索框 .. 可以使用 .ui.search 定位到它 .. 然后再使用 search 这个方法 ..

$('.ui.search').search();

在上面定义一个内容 .. var content =[] .. 内容是一个数组 .. 数组里面的项目就是可以搜索的东西 .. 每个项目都是一个对象 .. 在这个对象里,有一个 title 属性 .. 属性的值就是默认要搜索的东西 .. 这个 title 属性的值会显示在搜索结果里 ..

var content = [
{ title: '肖申克的救赎 The Shawshank Redemption (1994)' },
{ title: '盗梦空间 Inception (2010)' },
{ title: '阿甘正传 Forrest Gump (1994)' },
{ title: '辛德勒的名单 Schindler\'s List (1993)' },
{ title: '教父 The Godfather (1972)' },
];

再去配置一下这个 search 模块 .. 给它一个对象参数 .. 然后添加一个 source 属性 .. 它的值就是在本地的要搜索的静态内容 .. 这里就是上面定义的 content 这个变量 ..

$('.ui.search').search({
source: content
});

保存 .. 在这个搜索框里输入关键词 ... 会直接在它下面显示出搜索的结果 ..

本地搜索《 Semantic UI 应用接口 》

统计

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

社会化网络

关于

微信订阅号

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