Javascript 纯js上下拉菜单中的搜索结果

继续我的问题。有一个搜索块，在页面上的“p”块中搜索字符串，显示块数。
我无法使包含搜索字符串的块反映在下拉列表中，如图所示。
问题：
如何创建包含纯js中所需字符串的“p”块的下拉列表

图片中的示例，可用代码如下：

const input=document.querySelector（'input'））
const段落=document.querySelectorAll（'p'）
addEventListener（'input'，e=>{
const searchTerm=e.target.value
const regex=new RegExp（searchTerm'g'）
常量替换=`${searchTerm}`
用于（段落常量）{
p、 innerHTML=p.innerText.replace（regex，replacement）
}
让text=document.getElementById（'text'）.textContent
设分隔符=搜索项
let number=WordCount（文本，分隔符）
//console.log（“找到”，编号，“次数”）
document.getElementById（'result'）。textContent=number
})
函数字计数（str，分隔符）{
返回（str.split（分隔符）.length-1）；
}

@导入url（'https://fonts.googleapis.com/css?family=Roboto+单声道：400i&display=swap'）；
：根{
--原色：深红色；
--深色：#013；
--浅色：白烟；
}
身体{
字体系列：“Roboto Mono”，monospace；
颜色：var（--深色）；
背景色：var（--浅色）；
填充：1rem；
}
标题{
文本对齐：居中；
}
主要{
最大宽度：567px；
保证金：0自动；
}
.search\u容器{
文本对齐：居中；
填充：1rem；
保证金：0自动；
}
.搜索\输入{
边框：2px实心变幅（--深色）；
填充：1rem；
文本对齐：居中；
}
.搜索\输入：悬停，
.搜索\输入：焦点{
大纲：无；
边框颜色：var（--原色）；
-webkit盒阴影：0 5px 0.1px var（--原色）；
盒影：0.5px 0.1px var（--原色）；
}
.突出显示{
文本阴影：0 0 6px var（--原色）；
颜色：var（--原色）；
}

Количество:
水牛鱼锯齿

鳗鱼虎鱼，约翰·多莉·斯皮尔

西班牙鲭鱼

红鲑鲟

灰色乌鱼宽吻

班卓鲶；深沉的

海嗅泰坦鱼

澳大利亚灰鳍金枪鱼

鳙鱼

松鱼。莫哈拉海龙

北珠眼鳟鱼

沙潜水员；淡水鲨鱼濑鱼

在

p

循环中，您可以使用

String.prototype.match

检查每个

p

内容是否包含

输入的
文本，如果没有匹配项，则更新样式以隐藏
p
标记，如下所示

for (const p of paragraphs) {
  // Check if the matches are existed
  if (p.innerText.match(regex) == null) {
    // If no match, hide the p tag.
    p.style.display = 'none';
  } else {
    // If match exists, show the p tag.
    p.style.display = 'block';
    p.innerHTML = p.innerText.replace(regex, replacement)
  }
}


const input=document.querySelector（'input'））
const段落=document.querySelectorAll（'p'）
addEventListener（'input'，e=>{
const searchTerm=e.target.value
const regex=new RegExp（searchTerm'g'）
常量替换=`${searchTerm}`
用于（段落常量）{
if（p.innerText.match（regex）==null）{
p、 style.display='none'；
}否则{
p、 style.display='block'；
p、 innerHTML=p.innerText.replace（regex，replacement）
}
}
让text=document.getElementById（'text'）.textContent
设分隔符=搜索项
let number=WordCount（文本，分隔符）
//console.log（“找到”，编号，“次数”）
document.getElementById（'result'）。textContent=number
})
函数字计数（str，分隔符）{
返回（str.split（分隔符）.length-1）；
}
@导入url（'https://fonts.googleapis.com/css?family=Roboto+单声道：400i&display=swap'）；
：根{
--原色：深红色；
--深色：#013；
--浅色：白烟；
}
身体{
字体系列：“Roboto Mono”，monospace；
颜色：var（--深色）；
背景色：var（--浅色）；
填充：1rem；
}
标题{
文本对齐：居中；
}
主要{
最大宽度：567px；
保证金：0自动；
}
.search\u容器{
文本对齐：居中；
填充：1rem；
保证金：0自动；
}
.搜索\输入{
边框：2px实心变幅（--深色）；
填充：1rem；
文本对齐：居中；
}
.搜索\输入：悬停，
.搜索\输入：焦点{
大纲：无；
边框颜色：var（--原色）；
-webkit盒阴影：0 5px 0.1px var（--原色）；
盒影：0.5px 0.1px var（--原色）；
}
.突出显示{
文本阴影：0 0 6px var（--原色）；
颜色：var（--原色）；
}

Количество:
水牛鱼锯齿

鳗鱼虎鱼，约翰·多莉·斯皮尔

西班牙鲭鱼

红鲑鲟

灰色乌鱼宽吻

班卓鲶；深沉的

海嗅泰坦鱼

澳大利亚灰鳍金枪鱼

鳙鱼

松鱼。莫哈拉海龙

北珠眼鳟鱼

沙潜水员；淡水鲨鱼濑鱼