Javascript 如何使用输入进行自动完成搜索？

我需要jquery或javascript来使用搜索键入的结果执行自动完成下拉列表。。我需要将结果作为链接“”，这样我就可以在新选项卡中打开它，或者通过单击直接打开它。 这是我的密码：

<input type="text" id="searchinput" class="search-input" placeholder="Search here.." />

<ul id="main-menu">   
    <li class="has-sub"><a href="javascript:;"><span class="title">Menu Header1</span></a>
       <ul>
          <li><a href="example.com"><span class="childtitle">brand one</span></a></li>
          <li><a href="example.com"><span class="childtitle">brand two</span></a></li>
       </ul>    
    </li>

    <li class="has-sub"><a href="javascript:;"><span class="title">Menu Header2</span></a>
       <ul>
          <li><a href="example.com"><span class="childtitle">Car BMW</span></a></li>
          <li><a href="example.com"><span class="childtitle">Car Toyota</span></a></li>
          <li><a href="example.com"><span class="childtitle">Car Opel</span></a></li>
          <li><a href="example.com"><span class="childtitle">Car Kia</span></a></li>
       </ul>
    </li>
</ul>

普通JavaScript中可能的解决方案


重新创建标记数组，以便与输入匹配
为输入字段设置
input
事件侦听器
在每个
input
事件上，清除列表元素的内容，并基于一些匹配函数动态创建一个新的，添加
每个匹配字符串的链接


//要匹配的值数组
const标签=[‘宝马’、‘丰田’、‘欧宝’、‘起亚’]；
//获取输入和列表元素
常量输入=document.querySelector（'input'）；
const list=document.querySelector（'ul'）；
//简单的匹配函数，执行子串匹配
const getMatch=（toMatch，tags）=>
tags.filter（（tag）=>tag.includes（toMatch.toLowerCase（））；
input.addEventListener（'input'，（事件）=>{
//明确清单内容
list.innerHTML=''；
//仅当输入字段非空时才开始匹配
如果（输入值！=''）{
//调用匹配函数并为每个函数创建一个链接
//它返回的项目
getMatch（input.value，tags）.forEach（（match）=>{
const item=document.createElement（'li'）；
列表。追加（项目）；
const link=document.createElement（'a'）；
项目.附加（链接）；
//动态添加href属性和文本
link.setAttribute（'href'，'www.example.com/${match}`）；
link.textContent=匹配；
});
}
});
搜索：
我在这里找到了带有@MatusDubrava脚本和一些其他帮助的解决方案


$（函数（）{
var menuPages=$（'#主菜单li a:has（.childtitle）'）。映射（函数（）{
返回{
标签：$（this）.text（），
值：$（this.attr（'href'））
};
}).toArray（）；
$（“#txt_MenuSearch”）.autocomplete({
资料来源：menuPages，
选择：功能（事件、目标）{
/*选择时，在文本输入中显示项目的标签*/
event.preventDefault（）；
$（“#txt_MenuSearch”）.val（target.item.label）；
var link=target.item.value；
窗口。打开（链接）；
},
});
/*突出显示文本*/
$（“#txt_MenuSearch”）.data（“ui自动完成”）。_renderItem=函数（ul，项）{
var newText=String（item.label）。替换(
新RegExp（本术语“gi”），
"$&");
/*将匹配选项包装在'；
返回$（“
”）
.attr（“数据值”，项目值）
.append（新文本）
.附录（ul）；
};
});
















是的，您可以使用jQuery UI自动完成功能来完成。在这里查看演示。。。并根据您的要求在代码中进行更改。[。我希望这将对您有所帮助。thnx Bharat用于回放..但由于我是初学者，所以我不明白我必须做什么：（很抱歉延迟重播。您只需添加jQueryUi插件并根据您的要求更新此演示。@BharatMakvana谢谢您，我找到了答案并将其添加到此处非常感谢@Matus，但此代码缺少三件事。首先，我需要将结果显示为输入下的下拉列表，并带有我正在书写的字母标记。.second我需要结果来获得它自己的href链接，就像它在
元素中一样，例如example1.com和example2.com等。最后，是否可以使用
class=“childtitle”将结果作为目标
@MuhammadS.Eltyar
结果显示为输入下的下拉列表
，无需更改此代码，只需使用css以这种方式设置
ul
和
li
元素的样式。
结果获得自己的href链接
它们有自己的链接，但如果需要确切的格式，则更改
。forEach（（匹配）
到
.forEach（（match，idx）
和
www.example.com/${match}
到
www.example${idx+1}com
并且要向这些新创建的链接添加类，请将
link.className='childtitle'；
行添加到
forEach
块的底部。非常感谢..但是您没有得到我需要的..首先..我不需要向新创建的链接添加类，但我需要在我的html文档中获得所有带有class
'childtitle'
的项de而不是您在代码中提到的静态数组
const tags=['bmw'、'toyota'、'opel'、'kia']；
，因为我需要它从ul菜单动态获取页面名称。其次..需要到达那里
href
属性，例如“品牌一号”页面有url
href=“example.com”
和“品牌二号”页面有url
href=“google.com”
等。提前感谢您的帮助@Ma