JS实现了搜索关键词的智能提示功能

最近在百度搜索的时候，当你输入一个词或者单词的时候，他会为你弹出一个下拉框，里面有和你相关的搜索提示

比如我输入杨这个词，他会给我以下的搜索提示

我试图用JavaScript做一个类似的练习。下面是我在VS2013中写的代码。如果有什么问题，请随时给我建议。

！DOCTYPE html html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title script type=' text/JavaScript ' on load=function(){ function handle(){ var关键字={ '杨中科' : ['杨中科的视频'，'杨中科的微博'，'杨中科的邮箱']，'杨' : ['杨利伟'，'杨过'，'杨中科' : ['杨中科'，'杨中雪'，'杨中国']，'杨中科爱' :['杨中科爱' If(关键词}//开始创建层vardvobj=document . create element(' div ')；dvObj.id=' dvdvobj . style . width=' 300 px '；//dvobj . style . height=' 200px '；//以后可以避免使用dvobj.style.border=' 1px纯红'；document . body . appendchild(dvObj)；//出文档流dvobj . style . position=' absolute '；dvobj . style . left=this . offsetleft ' px '；dvobj . style . top=this . offset theight this . offset top ' px '；//要为其创建的循环(var I=0；I KeyOnes[this . value]。长度；I) {//创建一个可以存储文本的标签var pobj=document . create element(' p ')；pobj . innertext=KeyOnes[this . value][I]；//p标签应该有一只小手，突出显示pobj . style . cursor=' pointer '；pobj . style . margin=' 5px '；pobj . onmouseover=function(){ this . style . background COlOr=' red '；};pobj . onmouseout=function(){ this . style . background COlOr=' '；} dvobj . appendchild(Pobj)；//将p标记添加到图层中}//创建一个可以显示文件的标记}//在}}//firefox中，只能使用oninput来检测状态变化，需要使用addEventListener来注册事件。if(/msie/I . test(navigator . user agent))//ie browser { document . getelementbyid(' txt ')。onpropertytchange=handle } else {//不是ie浏览器，例如Firefox document . getelementbyid(' txt ')。addeventlistener ('input '，handle，false)；}};/script/header dyspan id=' msg '/span请输入搜索关键字输入类型=' text ' name=' name ' value=' style=' width :300 px；高度：30 px；font-size :25 px；Border:1px纯绿' id=' txt'/Baidu /body/html效果显示：

关于这个练习，我有以下想法

1.由于搜索热词是预先设置好的，放在键值对中，所以搜索范围有限，可以加深与数据库中的数据连接，直接从数据库中查询搜索关键词。这个怎么写我还没有彻底研究过，希望有经验的前辈给我指点。

2.关于这个代码的应用，我认为可以应用于用户查询搜索。百度搜索就是一个很好的例子

3.毕竟代码是JS写的。如果用户的计算机阻止了JS控件，效果将不会起作用。

以上就是边肖介绍的JS，实现搜索关键词的智能提示功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！