JavaScript |自动完成/建议功能实现代码 _JavaScript开发

有很多方法可以在javascript中创建自动完成功能。我们将针对其中两个。一种是使用纯Javascript, 另一种是使用框架(如Jquery)。
先决条件：
HTML
Java脚本
JQuery基础
1)使用纯Javascript(无框架)：
该方法比使用框架的方法更快地显示结果。
重要功能：
getElementsByTagName：用于通过元素的类或id从html获取元素。
createElement(" type")：create元素创建传递类型的元素
appendChild(node)：将传递的节点追加到附加父节点的末尾。
代码1：

< !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 tagsfunction ac(value) { document.getElementById('datalist').innerHTML = ''; //setting datalist empty at the start of function //if we skip this step, same name will be repeatedl=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] stringvar 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 = "https://www.lsbin.com/Delhi" > < / option > < option value = "https://www.lsbin.com/Ahemdabad" > < / option > < option value = "https://www.lsbin.com/Punjab" > < / option > < option value = "https://www.lsbin.com/Uttar Pradesh" > < / option > < option value = "https://www.lsbin.com/Himachal Pradesh" > < / option > < option value = "https://www.lsbin.com/Karnatka" > < / option > < option value = "https://www.lsbin.com/Kerela" > < / option > < option value = "https://www.lsbin.com/Maharashtra" > < / option > < option value = "https://www.lsbin.com/Gujrat" > < / option > < option value = "https://www.lsbin.com/Rajasthan" > < / option > < option value = "https://www.lsbin.com/Bihar" > < / option > < option value = "https://www.lsbin.com/Tamil Nadu" > < / option > < option value = "https://www.lsbin.com/Haryana" > < / option > < !-- This data list will be edited through javascript--> < / datalist > < / body > < / html >

输出如下：
首先, 输出将如下所示-

文章图片
当B放在盒子里面时, 输出如下：

文章图片
2)使用JQUERY
jQuery是一个跨平台的JavaScript库, 旨在简化HTML的客户端脚本。
jQuery具有内置的自动完成功能, 该功能接受id和可用标签列表。
代码2：

< !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="https://www.lsbin.com//code.jquery.com/ui/1.12.1/themes/base/jquery-ui. css"> < link rel = "stylesheet" href = "https://www.lsbin.com/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/* #tthe 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 >

键入字母以查看建议, 然后单击以自动完成文本。
输出如下：
首先, 输出将如下所示-