<!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)">

<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>

 

</datalist>

</body>

</html>

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *