Skip to content

Commit e653786

Browse files
karthik-dkarthik-d
committed
ajax autocomplete
1 parent a85f709 commit e653786

File tree

4 files changed

+149
-43
lines changed

4 files changed

+149
-43
lines changed

‎Practice/HTML-CSS-JS/AJAX-Autocomplete/autocomplete.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
function populateResults(slug, xhr) {
2+
var xml_doc = xhr.responseXML;
3+
var countryNodes = xml_doc.getElementsByTagName('country');
4+
var resultNode = document.getElementById('selectResults');
5+
resultNode.innerHTML = "";
6+
for (var country of countryNodes) {
7+
var regex = new RegExp('^' + slug + '*');
8+
if (regex.test(country.children[0].nodeValue)) {
9+
resultNode.innerHTML += country;
10+
}
11+
}
12+
}
13+
14+
function autocomp(event) {
15+
var xhr = new XMLHttpRequest();
16+
xhr.onreadystatechange = function () {
17+
if (xhr.readyState == 4 && xhr.status == 200) {
18+
populateResults(document.getElementById('selectBox').innerHTML, this);
19+
}
20+
}
21+
xhr.open('GET', 'countries.xml', true);
22+
xhr.send();
23+
}

‎Practice/HTML-CSS-JS/AJAX-Autocomplete/countries.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<countries>
2+
<country>Namibia</country>
3+
<country>Denmark</country>
4+
<country>Nile</country>
5+
<country>Nigeria</country>
6+
<country>India</country>

‎Practice/HTML-CSS-JS/AJAX-Autocomplete/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
5+
<head>
6+
<script src="autocomplete.js">
7+
function populateResults(slug, xhr) {
8+
var xml_doc = xhr.responseXML;
9+
var countryNodes = xml_doc.getElementsByTagName('country');
10+
var resultNode = document.getElementById('selectResults');
11+
resultNode.innerHTML = "";
12+
for (var country of countryNodes) {
13+
var regex = new RegExp('^' + slug + '*');
14+
if (regex.test(country.children[0].nodeValue)) {
15+
resultNode.innerHTML += country;
16+
}
17+
}
18+
}
19+
20+
function autocomp(event) {
21+
var xhr = new XMLHttpRequest();
22+
xhr.onreadystatechange = function () {
23+
if (xhr.readyState == 4 && xhr.status == 200) {
24+
populateResults(document.getElementById('selectBox').innerHTML, this);
25+
}
26+
}
27+
xhr.open('GET', 'countries.xml', true);
28+
xhr.setRequestHeader("Access-Control-Allow-Origin:", "*");
29+
xhr.send();
30+
}
31+
</script>
32+
</head>
33+
34+
<body>
35+
<form>
36+
<input type="text" id="selectBox" onkeypress="autocomp(event);">
37+
<p id="selectResults">
38+
</p>
39+
</form>
40+
</body>
41+
42+
</html>

‎Practice/HTML-CSS-JS/AjaxDemo/Ajax-XML.html‎

Lines changed: 78 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,84 @@
11
<!DOCTYPE html>
22
<html>
3+
34
<body>
4-
<div id='showCD'></div><br>
5-
<input type="button" onclick="previous()" value="<<">
6-
<input type="button" onclick="next()" value=">>">
7-
8-
<script>
9-
var i = 0;
10-
var x;
11-
displayCD(i);
12-
13-
function displayCD(i) {
14-
var xmlhttp = new XMLHttpRequest();
15-
xmlhttp.onreadystatechange = function() {
5+
<div id='showCD'></div><br>
6+
<input type="button" onclick="previous()" value="<<">
7+
<input type="button" onclick="next()" value=">>">
8+
9+
<script>
10+
var i = 0;
11+
var x;
12+
displayCD(i);
13+
14+
function displayCD(i) {
15+
var xmlhttp = new XMLHttpRequest();
16+
xmlhttp.onreadystatechange = function () {
1617
if (this.readyState == 4 && this.status == 200) {
17-
myFunction(this, i);
18+
myFunction(this, i);
1819
}
19-
};
20-
xmlhttp.open("GET", "cd_catalog.xml", true);
21-
xmlhttp.send();
22-
}
23-
24-
function myFunction(xml, i) {
25-
var xmlDoc = xml.responseXML;
26-
x = xmlDoc.getElementsByTagName("CD");
27-
document.getElementById("showCD").innerHTML =
28-
"Artist: " +
29-
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
30-
"<br>Title: " +
31-
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
32-
"<br>Year: " +
33-
x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
34-
}
35-
36-
function next() {
37-
if (i < x.length-1) {
38-
i++;
39-
displayCD(i);
40-
} }
41-
42-
function previous() {
43-
if (i > 0) {
44-
i--;
45-
displayCD(i);
46-
} }
47-
</script>
20+
};
21+
xmlhttp.open("GET", "cd_catalog.xml", true);
22+
xmlhttp.send();
23+
}
24+
25+
function myFunction(xml, i) {
26+
var xmlDoc = xml.responseXML;
27+
x = xmlDoc.getElementsByTagName("CD");
28+
document.getElementById("showCD").innerHTML =
29+
"Artist: " +
30+
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
31+
"<br>Title: " +
32+
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
33+
"<br>Year: " +
34+
x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
35+
}
36+
37+
function next() {
38+
if (i < x.length - 1) {
39+
i++;
40+
displayCD(i);
41+
}
42+
}
43+
44+
function previous() {
45+
if (i > 0) {
46+
i--;
47+
displayCD(i);
48+
}
49+
}
50+
51+
function populateResults(slug, xhr) {
52+
var xml_doc = xhr.responseXML;
53+
var countryNodes = xml_doc.getElementsByTagName('country');
54+
var resultNode = document.getElementById('selectResults');
55+
resultNode.innerHTML = "";
56+
for (var country of countryNodes) {
57+
var regex = new RegExp('^' + slug + '*');
58+
if (regex.test(country.children[0].nodeValue)) {
59+
resultNode.innerHTML += country;
60+
}
61+
}
62+
}
63+
64+
function autocomp(event) {
65+
var xhr = new XMLHttpRequest();
66+
xhr.onreadystatechange = function () {
67+
if (xhr.readyState == 4 && xhr.status == 200) {
68+
populateResults(document.getElementById('selectBox').innerHTML, this);
69+
}
70+
}
71+
xhr.open('GET', 'countries.xml', true);
72+
xhr.send();
73+
}
74+
75+
</script>
76+
77+
<form>
78+
<input type="text" id="selectBox" onkeypress="autocomp(event);">
79+
<p id="selectResults">
80+
</p>
81+
</form>
4882
</body>
49-
</html>
83+
84+
</html>

0 commit comments

Comments
 (0)