Javascript 如何将此搜索转换为类似于ubuntu搜索的搜索

我想在按下

ctrl+空格键的基础上实现搜索

1.哪个应该搜索我的
导航
（此处为垂直导航）

2.应在按下
esc
键时关闭

不适合我的东西：

算法
非常容易出错
在
术语之间不匹配

导航
栏包含
[“主页”、“个人资料”、“隐私”、“软件”]
这是我们对
搜索的兴趣所在
下面是我的完整代码：

执行步骤：只需按
[Aa zZ]
搜索栏中的任何字母表
就会出现，搜索这些术语中的任何一个
[“主页”、“个人资料”、“隐私”、“软件”]

我正在尝试下面的图片：


代码笔：（用于编辑的叉子）


功能匹配（str1、str2）{
var-tmpValue=0；
var minLength=str1.length；
如果（str1.length>str2.length）{
var minLength=str2.length；
}	
var maxLength=str1.length；
如果（str1.length=30）{
foundItem.push（项目）；
}
});
log（'founditems'，foundItem）；
var f=''；
foundItem.forEach（函数（已找到）{
f+=`${found}`；
$（'.search results'）.html（f）；
});
});
html，
身体{
身高：100%；
}
ul.nav{显示：内联块；}
.导航集装箱{
左：-200px；
}
.navbar默认值{
宽度：200px；
保证金：0；
身高：100%；
浮动：左；
}
.下拉菜单{
职位：相对！重要；
宽度：计算（100%+2px）；
盒影：无；
边界半径：0；
保证金：-1px0-1px；
}
.导航栏导航，
.navbar nav>li，
.导航栏左侧，
.导航栏对，
.导航栏标题{
浮动：无！重要；
}
.导航栏右侧.下拉菜单{
左：0；
右：自动；
}
.导航栏导航.导航栏右侧：最后一个孩子{
右边距：0；
}
#托格伦纳夫{
边界半径：0；
浮动：左；
边框：1px纯黑；
}
.标题行{
左侧填充：10px；
线高：2；
显示：内联块；
位置：固定；
高度：30px；
z指数：990；
宽度：100%；
边框底部：1px纯黑；
文本对齐：居中；
}
#标题按钮{
位置：固定；
右：5px；
线高：2；
}
/*搜索区域*/
.搜索区{
宽度：100%；
身高：100%；
背景：黑色；
不透明度：.8；
z指数：999999999；
}
.搜索栏{
}
.搜索栏输入{
宽度：80%；
位置：相对位置；
排名：0；
}
.找到的物品{
显示：内联块；
/*宽度：自动*/
/*高度：40px*/
填充：40px；
背景#5496b1；
边缘顶部：20px；
文本对齐：居中；
右边距：40px；
}










我希望这能帮助你


String.prototype.contains=函数（字符串）{
返回此。indexOf（字符串）>-1
}
$（文档）。在（'click'，'li a'，函数（e）上{
e、 预防默认值（）；
log（'helloworld'）；
var page=$（this）.closest（'li'）。data（'page'）；
$（'content_show'）.html（第页）；
});
$（文档）.bind（'keyup'，函数（e）{
if（e.ctrlKey&&e.keyCode==32）{
console.log（'control+space'）；
$（'.search area'）.show（）.addClass（'active'）；
$（“#搜索词”）.focus（）；
}
如果（例如keyCode===27）{
$（'.search area'）.hide（）.removeClass（'active'）；
}
如果（如keyCode===9）{
回来
}
if（$（'.search area'）.hasClass（'active'））{
匹配（）；
}
});
函数匹配（）{
var searchTerm=$（'#search_term'）.val（）；
var originalSearchTree=[]；
var foundItem=[]；
$（'.main导航li:not（.dropdown'）。每个（函数（）{
originalSearchTree.push（$（this.data（'page'））；
});
console.log（原始搜索树）；
originalSearchTree.forEach（函数（项）{
var fareItem=item.toLowerCase（）；
var fareSearchTerm=searchTerm.toLowerCase（）；if（fareItem.contains（fareSearchTerm））{
foundItem.push（项目）；
}
});
log（'founditems'，foundItem）；
var f=''；
foundItem.forEach（函数（已找到）{
f+=``；
$（'.search results'）.html（f）；
});
}
html，
身体{
身高：100%；
}
ul.nav{显示：内联块；}
.导航集装箱{
左：-200px；
}
.navbar默认值{
宽度：200px；
保证金：0；
身高：100%；
浮动：左；
}
.下拉菜单{
职位：相对！重要；
宽度：计算（100%+2px）；
盒影：无；
边界半径：0；
保证金：-1px0-1px；
}
.导航栏导航，
.navbar nav>li，
.导航栏左侧，
.导航栏对，
.导航栏标题{
浮动：无！重要；
}
.导航栏右侧.下拉菜单{
左：0；
右：自动；
}
.navbar-nav.navbar-righ