JSFiddle - React, Tailwind, and code Playground

by Hari Menon

HTML

<!DOCTYPE html>
<html>
<head>
<title>jQuery Autocomplete</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
</head>
<body>

<form method="GET" action="">
     <label for="searchState">State search</label>
     <input type="text" id="searchState" name="searchState" />    
     <br />
     <label for="searchState">City search</label>
     <input type="text" id="searchState" name="searchState" />    
</form>

</body>
</html>

JavaScript

$(document).ready(function() {
         var myArr = [];
     
         $.ajax({
             type: "GET",
     url: "states.xml", // change to full path of file on server
             dataType: "xml",
             success: parseXml,
             complete: setupAC,
             failure: function(data) {
                 alert("XML File could not be found");
                 }
         });
     
         function parseXml(xml)
         {
             //find every query value
             $(xml).find("state").each(function()
             {
                 myArr.push($(this).attr("label"));
             });    
         }
         
         function setupAC() {
             $("input#searchBox").autocomplete({
                     source: myArr,
                     minLength: 1,
                     select: function(event, ui) {
                         $("input#searchState").val(ui.item.value);
                         $("#searchForm").submit();
                     }
             });
         }
     });