怎么实现html搜索

内容：

1.我在标题栏有10个标题，链接到别的页面

2.怎么实现添加一个搜索框，搜索这10个标题，然后可以点击跳转过去

例如我在搜索栏输入1，然后点击搜索出现1页面的名字，点击可以过去1页面

可以参考这个

let data = [{
        key: "首页",
        url: "http://www.baidu.com"
    },
    {
        key: "分类",
        url: "http://www.baidu.com"
    },
    {
        key: "标签",
        url: "http://www.baidu.com"
    }
]

function search() {
    // 关键字
    let key = "首页";
    let item = data.filter(item => item.key == key);
    console.log(item);
}
search(); // [ { key: '首页', url: 'http://www.baidu.com' } ]