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

2021年3月9日15:48:15 发表评论 839 次浏览

有很多方法可以在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 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 >

输出如下：

首先, 输出将如下所示-

当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="//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
  
/* #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 >

键入字母以查看建议, 然后单击以自动完成文本。

输出如下：

首先, 输出将如下所示-