jQuery到Javascript/Vue

我想创建一个自定义搜索框，可以使用

mark.js

跳转到匹配项

这里有一个例子：

但它是使用jQuery编写的

我尝试将其转换为JS/Vue（使用Quasar），但现在无法使其工作。 没有错误，但也没有突出显示

我更新了jQuery行，如：

$prevBtn = $("button[data-search='prev']")

致：

而这些，我不知道如何转换其他，例如：

$nextBtn.add($prevBtn).on("click", function() {})

这是我的小提琴（简化版，但尚未完全完成，请确保在输入后单击“搜索”）：

---

我错过了什么？救命啊

我使用纯JavaScript重写了他们的jQuery示例

您应该能够比较这两个示例，了解各种jQuery函数如何转换为JavaScript，然后将它们实现到Vue项目中

我试图保持变量名不变，以便更容易理解

document.body.onload=function（）{
//输入字段
var$input=document.querySelector（“input[type='search']”），
//清除按钮
$clearBtn=document.querySelector（“按钮[data search='clear']”），
//上一个按钮
$prevBtn=document.querySelector（“按钮[data search='prev']”），
//下一个按钮
$nextBtn=document.querySelector（“按钮[data search='next']），
//要搜索的上下文
$content=document.querySelector（“.content”），
$contentMark=新标记（$content），
//用于保存元素的jQuery对象
$results，
//将附加到当前对象的类
//聚焦元件
currentClass=“当前”，
//跳转的顶部偏移（搜索栏）
偏移量=50，
//聚焦元素的当前索引
currentIndex=0；
/**
*跳转到与currentIndex匹配的元素
*/
函数jumpTo（）{
如果（$results.length）{
var位置，
$current=$results[currentIndex]；
$results.forEach（$result=>$result.classList.remove（currentClass））；
如果（当前）{
$current.classList.add（currentClass）；
位置=$current.offsetTop-offsetTop；
滚动到（0，位置）；
}
}
}
/**
*在中搜索输入的关键字
*输入时指定的上下文
*/
$input.addEventListener（“输入”，函数（）{
var searchVal=this.value；
$contentMark.unmark({
完成：函数（）{
$contentMark.mark（searchVal{
separateWordSearch：对，
完成：函数（）{
$results=$content.querySelectorAll（“标记”）；
currentIndex=0；
跳到（）；
}
});
}
});
});
/**
*清除搜索
*/
$clearBtn.addEventListener（“单击”，函数（）{
$contentMark.unmark（）；
$input.value=“”
$input.focus（）；
});
/**
*下一个和上一个搜索跳转到
*/
$nextBtn.之后（$prevBtn）；
函数prevenxthandler（）{
如果（$results.length）{
currentIndex+=（this.dataset.search==“prev”？-1:1）；
如果（当前索引<0）{
currentIndex=$results.length-1；
}
如果（当前索引>$results.length-1）{
currentIndex=0；
}
跳到（）；
}
}
$nextBtn.addEventListener（“单击”，PrevenxtHandler）；
$prevBtn.addEventListener（“单击”，prevNextHandler）；
};
标记{
背景：黄色；
}
标记电流{
背景：橙色；
}
.标题{
填充：10px；
宽度：100%；
背景：#eee；
位置：固定；
排名：0；
左：0；
}
.内容{
边缘顶部：50px；
}

搜索：
&达尔；
&uarr；
✖

Lorem ipsum dolor sit amet，是一位杰出的献身者。两人一组，一组，一组，另一组。阿利奎姆·索利西图丁·艾利特。同侧索达莱斯无尾。Donec vulputate venenatis magna。前庭坐在埃米特·利奥·拉西尼亚，前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭
梅特斯。在别有用心的或非佩林式的情况下。毛里斯·奎斯是临时的。Donec nec sagittis magna。整型弗林尼利亚·波苏尔·梅特斯·尤莫利斯。Ut ac metus门。杜伊斯·塞德·拉西尼亚·梅特斯。这是我生命中最重要的时刻。


维瓦姆斯·波苏尔调味品利奥·欧·亨德雷特。大白鼠腹股沟前有一个菱形。Lorem ipsum dolor sit amet，是一位杰出的献身者。前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭。维瓦摩斯-奥迪奥元素，交通工具
哦，猫咪。Nullam hendrerit velit libero，孕妇porttitor tortor ullamcorper eu。但在奥基人身上，这是一种不平等的矢状体。做一个爱的人。要讲尊严，要讲礼貌
塞德。


前庭，前庭，前庭。Phasellus eu odio sapien。弓形体前庭。泰勒斯·努克（Quisque tellus nunc）、利库斯·努克（facilisis id lacus nec）、奥纳·朗克斯（Orna rhoncus Elite）。维尼那提斯调味品。塞德·奥奇·马萨，pulvinar
他是nec的老板，佩伦特斯的老板。Mauris lobortis tincidunt nunc，是一种生活节拍。马莱苏阿达岛上的马格里斯岛（Curabitur lobortis mauris）是一个交通工具。长柄库拉索。多奈克·马克西姆斯·坦普斯·特里斯蒂克。
这是一句名言，是一个权杖，是一个设施。这是我的荣幸。


在猫咪厄洛斯身上，有一句至理名言：生命的权杖。这是一种新的元素。Vivamus是孕妇purus，是有效的侵权人。无分子弧。这是一个很好的例子。非智人
紫罗兰放置于nec腔隙。埃尼安·洛博蒂斯是一位智者。这是一种非常有效的治疗方法。


Nam sit amet pellentesque东部。这是一只乌贼，乌贼坐在阿梅特·马蒂斯的位子上，三叉戟不在里索斯。在康格的Phasellus，例如在尼西利奥的Proin，在康格的前庭vitae accumsan，帝王的dolor。布兰迪特尼斯的奎斯克。类aptent taciti socialsqu
每一个科努比亚人，每一个希梅纳人
$nextBtn.add($prevBtn).on("click", function() {})