JavaScript |自动完成/建议功能-yiteyi-C++库

有很多方法可以在javascript中实现自动完成功能。我们将瞄准其中两个。一个使用纯Javascript，另一个使用像Jquery这样的框架。 先决条件：

null

1）使用纯Javascript（无框架）： 这种方法比使用框架的方法更快地显示结果。 重要功能： getElementsByTagName：用于从html中按类或id获取元素。 createElement（“类型”）：create element创建传递类型的元素 appendChild（节点）：将传递的节点追加到附加的父节点的末尾。 代码#1：

HTML

                         <!DOCTYPE html>                       
                         <                                     html                                     >                       
                         <                                     head                                     >                       
                                                 <                                     title                                     >Auto complete using Pure Javascript</                                     title                                     >                       
                         </                                     head                                     >                       
                         <                                     body                                     >                       
                         <                                     script                                     type="text/javascript">                       
                                                 var tags = [                       
                                                 "Delhi",                       
                                                 "Ahemdabad",                       
                                                 "Punjab",                       
                                                 "Uttar Pradesh",                       
                                                 "Himachal Pradesh",                       
                                                 "Karnatka",                       
                                                 "Kerela",                       
                                                 "Maharashtra",                       
                                                 "Gujrat",                       
                                                 "Rajasthan",                       
                                                 "Bihar",                       
                                                 "Tamil Nadu",                       
                                                 "Haryana"                       
                                                 ];                       
           
                                                 /*list of available options*/                       
                                                 var n= tags.length; //length of datalist tags                       
           
                                                 function ac(value) {                       
                                                 document.getElementById('datalist').innerHTML = '';                       
                                                 //setting datalist empty at the start of function                       
                                                 //if we skip this step, same name will be repeated                       
                                   
                                                 l=value.length;                       
                                                 //input query length                       
                                                 for (var i = 0; i<                                     n                                     ; i++) {                       
                                                 if(((tags[i].toLowerCase()).indexOf(value.toLowerCase()))>-1)                       
                                                 {                       
                                                 //comparing if input string is existing in tags[i] string                       
           
                                                 var node = document.createElement("option");                       
                                                 var val = document.createTextNode(tags[i]);                       
                                                 node.appendChild(val);                       
           
                                                 document.getElementById("datalist").appendChild(node);                       
                                                 //creating and appending new elements in data list                       
                                                 }                       
                                                 }                       
                                                 }                       
                                   
                         </                                     script                                     >                       
           
                         <                                     input                                     type="text" list="datalist" onkeyup="ac(this.value)">                       
                         <!-- On keyup calls the function everytime a key is released -->                       
                         <                                     datalist                                     id="datalist">                       
           
                         <                                     option                                     value="Delhi"></                                     option                                     >                       
                         <                                     option                                     value="Ahemdabad"></                                     option                                     >                       
                         <                                     option                                     value="Punjab"></                                     option                                     >                       
                         <                                     option                                     value="Uttar Pradesh"></                                     option                                     >                       
                         <                                     option                                     value="Himachal Pradesh"></                                     option                                     >                       
                         <                                     option                                     value="Karnatka"></                                     option                                     >                       
                         <                                     option                                     value="Kerela"></                                     option                                     >                       
                         <                                     option                                     value="Maharashtra"></                                     option                                     >                       
                         <                                     option                                     value="Gujrat"></                                     option                                     >                       
                         <                                     option                                     value="Rajasthan"></                                     option                                     >                       
                         <                                     option                                     value="Bihar"></                                     option                                     >                       
                         <                                     option                                     value="Tamil Nadu"></                                     option                                     >                       
                         <                                     option                                     value="Haryana"></                                     option                                     >                       
           
                         <!-- This data list will be edited through javascript     -->                       
                         </                                     datalist                                     >                       
                         </                                     body                                     >                       
                         </                                     html                                     >                       

输出： 首先，输出如下所示-

图片[1]-JavaScript |自动完成/建议功能-yiteyi-C++库

当B被放进盒子里时，输出如下-

图片[2]-JavaScript |自动完成/建议功能-yiteyi-C++库

2）使用JQUERY jQuery是一个跨平台JavaScript库，旨在简化HTML的客户端脚本。 JQuery有一个内置的自动完成功能，它接受id和可用标记的列表。 代码#2：

HTML

                         <!doctype html>                       
                         <                                     html                                     lang="en">                       
                         <                                     head                                     >                       
                                                 <                                     meta                                     charset="utf-8">                       
                                                 <                                     meta                                     name="viewport" content="                                     width                                     =                                     device                                     -width,                                     initial-scale                                     =                                     1                                     ">                       
                                                 <                                     title                                     >Autocomplete using Jquery</                                     title                                     >                       
                                                 <                                     link                                     rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.                       
                         css">                       
                                                 <                                     link                                     rel="stylesheet" href="/resources/demos/style.css">                       
                                                 <                                     script                                     src="                           https://code.jquery.com/jquery-1.12.4.js">                          </                                     script                                     >                       
                                                 <                                     script                                     src="                           https://code.jquery.com/ui/1.12.1/jquery-ui.js">                          </                                     script                                     >                       
                                                 <                                     script                                     >                       
                                                 $( function() {                       
                                                 var tags = [                       
                                                 "Delhi",                       
                                                 "Ahemdabad",                       
                                                 "Punjab",                       
                                                 "Uttar Pradesh",                       
                                                 "Himachal Pradesh",                       
                                                 "Karnatka",                       
                                                 "Kerela",                       
                                                 "Maharashtra",                       
                                                 "Gujrat",                       
                                                 "Rajasthan",                       
                                                 "Bihar",                       
                                                 "Tamil Nadu",                       
                                                 "Haryana"                       
           
           
                                                 /* Making a list of available tags */                       
           
           
                                                 ];                       
                                                 $( "#tags" ).autocomplete({                       
                                                 source: tags                       
           
                         /* #the ags is the id of the input element                       
                         source: tags is the list of available tags*/                       
           
           
                                                 });                       
                                                 } );                       
                                                 </                                     script                                     >                       
                         </                                     head                                     >                       
                         <                                     body                                     >                       
                                   
                         <                                     div                                     class="ui-widget">                       
                                                 <                                     H3                                     >Enter an alphabet to get suggestion:</                                     H3                                     >                       
                                                 <                                     input                                     id="tags">                       
                         </                                     div                                     >                       
                                   
                         </                                     body                                     >                       
                         </                                     html                                     >                       