jQuery Autocomplete with XML Data Source

by Vincy. Last modified on July 13th, 2022.

Autocomplete feature is a typeahead mechanism to show input suggestion to the user. It is a common UI/UX feature in applications to intuitively help the user with input.

For example, in an internal messaging system, it will be comfortable if the To-Address field is a typeahead field. By typing on this field the list of selectable autocomplete suggestion could be displayed to the user. Google uses this exceptionally well Google Search keyword suggestion.

View Demo

This is different from the dependent dropdown. Previously, we have seen how to display autocomplete suggestion by collecting data from the database using jQuery AJAX. I called jQuery AJAX function to trigger server request to get the database results based on the data typed on the autocomplete field.

In this example, I have implemented the jQuery UI autocomplete to read data from the XML file resource. The source XML file contains the country name list which is specified as the source while initializing the jQuery UI autocomplete library function.

This screenshot shows the output of the jQuery UI autocomplete output by reading data from the XML source via AJAX.

jquery-autocomplete-with-xml-data-source-output

Autocomplete HTML Target

This is the landing page where the autocomplete input field is displayed. This field id is referred in the jquery selector while initializing the autocomplete function.

By typing in this field the jQuery autocomplete function is called to show the suggestion box to the user. We have already seen an example to create Google location search interface with autocomplete feature.

<!Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
  
</head>
<body>
<div class="ui-widget">
  <label for="search-keyword">Tags: </label>
  <input id="search-keyword">
</div>
</body>
</html>

jQuery Autocomplete to Read XML via AJAX

On the keypress event of the autocomplete field, the jQuery autocomplete function is called to read the XML data and display the suggestion box with the related options. The XML file name is specified to the AJAX call to read the country name list into an array.

In a previous example, we have seen how to convert an array into XML using PHP. This array data is set to the source parameter of the autocomplete function. From this source data, the autocomplete suggestion options are displayed.

<script>
  var countryResult = [];
  $(document).on('keyup' , '#search-keyword'  ,function(){
    var keyvalue = $("#search-keyword").val();

    var xhttp;
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            countryResult = [];
            myFunction(this , keyvalue);
        }
    };
    xhttp.open("GET", "country.xml", true);
    xhttp.send();
  });

  function myFunction(xml , key) {
      var x, i, xmlDoc , key;
      xmlDoc = xml.responseXML;
      x = xmlDoc.getElementsByTagName("country");
      var counter = 0;
      for (i = 0; i < x.length; i++) {
          var value = x[i].childNodes[0].nodeValue.trim();
          var pattern = value.substring(0 , key.length);
             if(key.toUpperCase() == pattern.toUpperCase() && counter < 10){
               countryResult.push(value);
               counter++;
             }
      }
       $("#search-keyword").autocomplete({
            source: countryResult
          });
  }

  $( function() {
    $( "#search-keyword" ).autocomplete({
      source:countryResult
    });
  });
  </script>

XML File Data Source – Countries List

This is the XML file data containing the list of country names.

<countries>
<country>Albania</country>
<country>Algeria</country>
<country>American Samoa</country>
<country>Andorra</country>
<country>Angola</country>
<country>Anguilla</country>
<country>Afghanistan</country>
<country>Antarctica</country>
<country>Antigua And Barbuda</country>
<country>Argentina</country>
<country>Armenia</country>
<country>Aruba</country>
<country>Australia</country>
<country>Austria</country>
<country>Azerbaijan</country>
<country>Bahamas</country>
<country>Bahrain</country>
<country>Bangladesh</country>
<country>Barbados</country>
<country>Belarus</country>
<country>Belgium</country>
<country>Belize</country>
<country>Benin</country>
<country>Bermuda</country>
<country>Bhutan</country>
<country>Bolivia</country>
<country>Bosnia And Herzegovina</country>
<country>Botswana</country>
<country>Bouvet Island</country>
<country>Brazil</country>
<country>British Indian Ocean Territory</country>
<country>Brunei Darussalam</country>
<country>Bulgaria</country>
<country>Burkina Faso</country>
<country>Burundi</country>
<country>Cambodia</country>
<country>Cameroon</country>
<country>Canada</country>
<country>Cape Verde</country>
<country>Cayman Islands</country>
<country>Central African Republic</country>
<country>Chad</country>
<country>Chile</country>
<country>China</country>
<country>Christmas Island</country>
<country>Cocos (Keeling) Islands</country>
<country>Colombia</country>
<country>Comoros</country>
<country>Congo</country>
<country>Cook Islands</country>
<country>Costa Rica</country>
<country>Cote D'Ivoire</country>
<country>Croatia (Local Name: Hrvatska)</country>
<country>Cuba</country>
<country>Cyprus</country>
<country>Czech Republic</country>
<country>Denmark</country>
<country>Djibouti</country>
<country>Dominica</country>
<country>Dominican Republic</country>
<country>Ecuador</country>
<country>Egypt</country>
<country>El Salvador</country>
<country>Equatorial Guinea</country>
<country>Eritrea</country>
<country>Estonia</country>
<country>Ethiopia</country>
<country>Falkland Islands (Malvinas)</country>
<country>Faroe Islands</country>
<country>Fiji</country>
<country>Finland</country>
<country>France</country>
<country>France, Metropolitan</country>
<country>French Guiana</country>
<country>French Polynesia</country>
<country>French Southern Territories</country>
<country>Gabon</country>
<country>Gambia</country>
<country>Georgia</country>
<country>Germany</country>
<country>Ghana</country>
<country>Gibraltar</country>
<country>Greece</country>
<country>Greenland</country>
<country>Grenada</country>
<country>Guadeloupe</country>
<country>Guam</country>
<country>Guatemala</country>
<country>Guinea</country>
<country>Guinea-Bissau</country>
<country>Guyana</country>
<country>Haiti</country>
<country>Heard Island  Mcdonald Islands</country>
<country>Honduras</country>
<country>Hong Kong</country>
<country>Hungary</country>
<country>Iceland</country>
<country>India</country>
<country>Indonesia</country>
<country>Iran, Islamic Republic Of</country>
<country>Iraq</country>
<country>Ireland</country>
<country>Israel</country>
<country>Italy</country>
<country>Jamaica</country>
<country>Japan</country>
<country>Jordan</country>
<country>Kazakhstan</country>
<country>Kenya</country>
<country>Kiribati</country>
<country>Korea, Democratic People'S Republic Of</country>
<country>Korea, Republic Of</country>
<country>Kuwait</country>
<country>Kyrgyzstan</country>
<country>Lao People'S Democratic Republic</country>
<country>Latvia</country>
<country>Lebanon</country>
<country>Lesotho</country>
<country>Liberia</country>
<country>Libyan Arab Jamahiriya</country>
<country>Liechtenstein</country>
<country>Lithuania</country>
<country>Luxembourg</country>
<country>Macau</country>
<country>Macedonia, The Former Yugoslav Republic Of</country>
<country>Madagascar</country>
<country>Malawi</country>
<country>Malaysia</country>
<country>Maldives</country>
<country>Mali</country>
<country>Malta</country>
<country>Marshall Islands</country>
<country>Martinique</country>
<country>Mauritania</country>
<country>Mauritius</country>
<country>Mayotte</country>
<country>Mexico</country>
<country>Micronesia, Federated States Of</country>
<country>Moldova, Republic Of</country>
<country>Monaco</country>
<country>Mongolia</country>
<country>Montserrat</country>
<country>Morocco</country>
<country>Mozambique</country>
<country>Myanmar</country>
<country>Namibia</country>
<country>Nauru</country>
<country>Nepal</country>
<country>Netherlands</country>
<country>Netherlands Antilles</country>
<country>New Caledonia</country>
<country>New Zealand</country>
<country>Nicaragua</country>
<country>Niger</country>
<country>Nigeria</country>
<country>Niue</country>
<country>Norfolk Island</country>
<country>Northern Mariana Islands</country>
<country>Norway</country>
<country>Oman</country>
<country>Pakistan</country>
<country>Palau</country>
<country>Panama</country>
<country>Papua New Guinea</country>
<country>Paraguay</country>
<country>Peru</country>
<country>Philippines</country>
<country>Pitcairn</country>
<country>Poland</country>
<country>Portugal</country>
<country>Puerto Rico</country>
<country>Qatar</country>
<country>Reunion</country>
<country>Romania</country>
<country>Russian Federation</country>
<country>Rwanda</country>
<country>Saint Helena</country>
<country>Saint Kitts And Nevis</country>
<country>Saint Lucia</country>
<country>Saint Pierre And Miquelon</country>
<country>Saint Vincent And The Grenadines</country>
<country>Samoa</country>
<country>San Marino</country>
<country>Sao Tome And Principe</country>
<country>Saudi Arabia</country>
<country>Senegal</country>
<country>Seychelles</country>
<country>Sierra Leone</country>
<country>Singapore</country>
<country>Slovakia (Slovak Republic)</country>
<country>Slovenia</country>
<country>Solomon Islands</country>
<country>Somalia</country>
<country>South Africa</country>
<country>Spain</country>
<country>Sri Lanka</country>
<country>Sudan</country>
<country>Suriname</country>
<country>Svalbard And Jan Mayen Islands</country>
<country>Swaziland</country>
<country>Sweden</country>
<country>Switzerland</country>
<country>Syrian Arab Republic</country>
<country>Taiwan, Province Of China</country>
<country>Tajikistan</country>
<country>Tanzania, United Republic Of</country>
<country>Thailand</country>
<country>Togo</country>
<country>Tokelau</country>
<country>Tonga</country>
<country>Trinidad And Tobago</country>
<country>Tunisia</country>
<country>Turkey</country>
<country>Turkmenistan</country>
<country>Turks And Caicos Islands</country>
<country>Tuvalu</country>
<country>Uganda</country>
<country>Ukraine</country>
<country>United Arab Emirates</country>
<country>United Kingdom</country>
<country>United States</country>
<country>United States Minor Outlying Islands</country>
<country>Uruguay</country>
<country>Uzbekistan</country>
<country>Vanuatu</country>
<country>Vatican City State (Holy See)</country>
<country>Venezuela</country>
<country>Viet Nam</country>
<country>Virgin Islands (British)</country>
<country>Virgin Islands (U.S.)</country>
<country>Wallis And Futuna Islands</country>
<country>Western Sahara</country>
<country>Yemen</country>
<country>Yugoslavia</country>
<country>Zaire</country>
<country>Zambia</country>
<country>Zimbabwe</country>
</countries>

View DemoDownloads

Vincy
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Tutorials

↑ Back to Top

Share this page