backup
This commit is contained in:
51
ajax_workshop_1/gethint.php
Normal file
51
ajax_workshop_1/gethint.php
Normal file
@@ -0,0 +1,51 @@
|
||||
<?php
|
||||
$a[] = "Anna";
|
||||
$a[] = "Brittany";
|
||||
$a[] = "Cinderella";
|
||||
$a[] = "Diana";
|
||||
$a[] = "Eva";
|
||||
$a[] = "Fiona";
|
||||
$a[] = "Gunda";
|
||||
$a[] = "Hege";
|
||||
$a[] = "Inga";
|
||||
$a[] = "Johanna";
|
||||
$a[] = "Kitty";
|
||||
$a[] = "Linda";
|
||||
$a[] = "Nina";
|
||||
$a[] = "Ophelia";
|
||||
$a[] = "Petunia";
|
||||
$a[] = "Amanda";
|
||||
$a[] = "Raquel";
|
||||
$a[] = "Cindy";
|
||||
$a[] = "Doris";
|
||||
$a[] = "Eve";
|
||||
$a[] = "Evita";
|
||||
$a[] = "Sunniva";
|
||||
$a[] = "Tove";
|
||||
$a[] = "Unni";
|
||||
$a[] = "Violet";
|
||||
$a[] = "Liza";
|
||||
$a[] = "Elizabeth";
|
||||
$a[] = "Ellen";
|
||||
$a[] = "Wenche";
|
||||
$a[] = "Vicky";
|
||||
|
||||
// get the q parameter, the text typed in, from URL
|
||||
$q = $_REQUEST["q"];
|
||||
$hint = "";
|
||||
// lookup all hints from array if $q is different from ""
|
||||
if ($q !== "") {
|
||||
$q = strtolower($q);
|
||||
$len=strlen($q);
|
||||
foreach($a as $name) {
|
||||
if (stristr($q, substr($name, 0, $len))) {
|
||||
if ($hint === "") {
|
||||
$hint = $name;
|
||||
} else {
|
||||
$hint .= ", $name";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Output "no suggestion" if no hint was found or output results
|
||||
echo $hint === "" ? "no suggestion" : $hint;
|
19
ajax_workshop_1/index.html
Normal file
19
ajax_workshop_1/index.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>AJAX Live Search</title>
|
||||
<link href="favicon.png" rel="icon">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||
<link href="styles.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
First name: <input id="selectInput" type="text" onkeyup="showHintSelect(this.value)">
|
||||
</form>
|
||||
<p>Suggestions: <span id="txtHint"></span></p>
|
||||
<select id="resultsSelectionBox"></select>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" defer></script>
|
||||
<script src="index.js" defer></script>
|
||||
</body>
|
||||
</html>
|
40
ajax_workshop_1/index.js
Normal file
40
ajax_workshop_1/index.js
Normal file
@@ -0,0 +1,40 @@
|
||||
function showHint(str) {
|
||||
if (str.length === 0) {
|
||||
document.getElementById("txtHint").innerHTML = "";
|
||||
} else {
|
||||
let xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
var uic = document.getElementById("txtHint")
|
||||
uic.innerHTML = this.responseText;
|
||||
}
|
||||
};
|
||||
xmlhttp.open("GET", "gethint.php?q=" + str, true);
|
||||
xmlhttp.send();
|
||||
}
|
||||
}
|
||||
|
||||
function showHintSelect(str) {
|
||||
if (str.length === 0) {
|
||||
document.getElementById("txtHint").innerHTML = "";
|
||||
} else {
|
||||
let xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.onreadystatechange = function() {
|
||||
if (this.readyState === 4 && this.status === 200) {
|
||||
let select = document.getElementById("resultsSelectionBox")
|
||||
let names = this.responseText.split(',');
|
||||
for (let i = 0; i<names.length; i++) {
|
||||
let opt = document.createElement('option');
|
||||
opt.value = names[i];
|
||||
opt.innerHTML = names[i];
|
||||
select.appendChild(opt);
|
||||
}
|
||||
let hint = document.getElementById("txtHint")
|
||||
hint.innerHTML = this.responseText;
|
||||
}
|
||||
};
|
||||
xmlhttp.open("GET", "gethint.php?q=" + str, true);
|
||||
xmlhttp.send();
|
||||
}
|
||||
}
|
||||
|
0
ajax_workshop_1/styles.css
Normal file
0
ajax_workshop_1/styles.css
Normal file
Reference in New Issue
Block a user