Tilføjelse til eksisterende ajax script
hej,Jeg har følgende script som jeg ønsker udbygget. Når en værdi fra dropdown menuen ($movie_name) vælges indsættes den i id="inputText" og samtidig indsætte den tilhørende $year i id="inputText2". Scriptet er fundet på nettet og den nuværende udgave mangler kun at få tilføjet kode så $year vælges samtidig og indsættes i den relevante id.
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="suggest.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
<title>Auto Suggest Example</title>
</head>
<body onclick="emptySuggestions();" onkeydown="handleTab(event);">
<form action="#" method="post" >
<table border="0" cellpadding="0" cellspacing="0" align="center" style="width: 80%">
<tr>
<td>
<input type="text" id="inputText" onfocus="resetCurrentLi();" onkeyup="handleInput(event, this.value);" autocomplete="off" class="inputText" />
<input type="text" id="inputText2" class="inputText2" />
<input type="submit" name="submit" value="Search" class="inputButton" />
<br />
<div id="suggestions" style="display: block"> </div>
</td>
</tr>
<tr>
<td height="25" class="style1">
Version 1.2.3
</td>
</tr>
</table>
</form>
</body>
</html>
database.php
<?php
$databaseConnect = mysqli_connect("XXX")
Or die("Unable to connect to the database.");
$userInput = $_GET["query"];
$suggestions = "";
$query = "SELECT movie, year FROM Movies WHERE movie LIKE '$userInput%' LIMIT 10";
$result = mysqli_query($databaseConnect, $query);
$row = mysqli_fetch_assoc($result);
$firstResult = true;
while ($row) {
$movie_name = $row['movie'];
$year = $row['year'];
if($firstResult) {
$suggestions = $movie_name;
$firstResult = false;
}
else {
$suggestions .= "," . $movie_name;
}
$row = mysqli_fetch_assoc($result);
}
mysqli_free_result($result);
mysqli_close($databaseConnect);
echo $suggestions;
?>
suggest.js
var KEYUP = 38;
var KEYDOWN = 40;
var KEYENTER = 13;
var KEYTAB = 9;
var xmlHttp;
var suggestionsShown = false;
var currentlySelectedLi = -1;
/**
* Deselects a specific li by changing the class/style to 'li'
* -- Called by handleInput(e, userInput), newCurrentLi(li)
*
* @param {Element} list The element 'suggestions' by tag li
* @param {Integer} li The number of the li within the ul using 0 based index
*/
function deselectLi(list, li) {
if(li != -1) {
list[li].className = "li";
}
}
/**
* Empties the 'suggetions' div. Sets the innerHTML to empty string and the display to none.
* -- Called by body onclick
*/
function emptySuggestions() {
document.getElementById("suggestions").innerHTML = "";
document.getElementById("suggestions").style.display = 'none';
}
/**
* Gets a reference to the current list
*
* @return returns a reference to the list
*/
function getList() {
return document.getElementById("suggestions").getElementsByTagName("li");
}
/**
* Gets the xmlhttp object which is the keystone of AJAX. The object type returned depends on the browser used.
* -- Called by handleInput(e, userInput)
*
* @return xmlHttp The xmlHttp object needed for the users browser.
*/
function getXmlHttpObject() {
var xmlHttp = null;
try {
xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
}
}
return xmlHttp;
}
/**
* Handles a user clicking a suggestion
* -- Called by li onclick
*
* @param {String} selection The suggestion that the user clicked
*/
function handleClick(selection) {
document.getElementById("inputText").value = unescape(selection);
emptySuggestions();
}
/**
* Handles a user typing in the inputText box.
* -- Called by inputText onkeyup
* -- EXIT IF the input is empty, the suggestions div will be emptied then the function will return
* -- EXIT IF the user hit the KEYUP or KEYDOWN key, things will be updated accordingly abd the function will return
*
* @param {Event} e The event which triggered the function call
* @param {String} userInput The input entered by the user
*/
function handleInput(e, userInput) {
var theEvent = e || window.event;
if (userInput.length == 0) {
emptySuggestions();
return;
}
if (theEvent.keyCode == KEYUP || theEvent.keyCode == KEYDOWN) {
var list = getList();
if(theEvent.keyCode == KEYDOWN) {
var newSelectedLi = currentlySelectedLi + 1;
}
else {
var newSelectedLi = currentlySelectedLi - 1;
}
if(newSelectedLi <= 9 && newSelectedLi >= 0) {
selectLi(list, newSelectedLi, true);
deselectLi(list, currentlySelectedLi);
setCurrentLi(newSelectedLi);
}
return;
}
xmlHttp = getXmlHttpObject();
if (xmlHttp == null) {
alert("Your browser does not support this application. Please update to a newer version.");
return;
}
var url = "database.php?query=" + userInput + "&sid=" + Math.random();
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
/**
* Handles a user hitting the 'Tab' key while there are suggestions.
* -- Called by body onkeydown
*
* @param {Event} e The event which triggered the function call
*/
function handleTab(e) {
var theEvent = e || window.event;
if(theEvent.keyCode == KEYTAB && document.getElementById("suggestions").innerHTML != "") {
setInputText();
emptySuggestions();
}
}
/**
* Handles the user mousing over a new suggestion
* -- Called by li onmouseover
*
* @param {Integer} li The number of the li within the ul using 0 based index
*/
function newCurrentLi(li) {
var list = getList();
for(var i = 0; i < list.length; i++) {
if(i == li) {
selectLi(list, li, false);
setCurrentLi(li);
}
else {
deselectLi(list, i);
}
}
}
/**
* Resets the currentlySelectedLi value to -1
* -- Called by inputText onfocus
*/
function resetCurrentLi() {
currentlySelectedLi = -1;
}
/**
* Selects the new selected li. Function will change the class to 'hoverLi' and will update the text of inputText if the updateInputText is true
* -- Called by newCurrentLi(li), handleInput(e, userInput)
*
* @param {Element} list The element 'suggestions' by tag li
* @param {Integer} li The number of the li within the ul using 0 based index
* @param {Boolean} updateInputText The boolean which tells the function if it should update the inputText box based on the new li
*/
function selectLi(list, li, updateInputText) {
list[li].className = "hoverLi";
if (updateInputText) {
setInputText(li);
}
}
/**
* Sets the currentlySelectedLi variable based on the li passed in.
* -- Called by newCurrentLi(li), handleInput(e, userInput)
*
* @param {Integer} li The number of the li within the ul using 0 based index
*/
function setCurrentLi(li) {
currentlySelectedLi = li;
}
/**
* Sets the inputText box based on the currentlySelectedLi
*
* @param {Integer} li The number of the li within the ul using 0 based index (Optional)
*/
function setInputText(li) {
var list = getList();
if(li >= 0) {
document.getElementById("inputText").value = list[li].innerHTML.substring(6);
}
else {
document.getElementById("inputText").value = list[currentlySelectedLi].innerHTML.substring(6);
}
}
/**
* Handles a state change in the xmlHttp object.
* -- Called by handleInput()
*/
function stateChanged() {
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
suggestionsShown = true;
var split = xmlHttp.responseText.split(",");
var suggestionList = "";
if(split[0] != "") {
for(var i = 0; i < split.length; i++) {
suggestionList += "<li value='" + i + "' class=\"li\" onmouseover=\"newCurrentLi(this.value);\" onclick=\"handleClick('" + escape(split[i]) + "');\"> " + split[i].substr(0, 30) + "</li>";
}
if(suggestionList != "") {
suggestionList = "<ul class=\"ul\">" + suggestionList;
suggestionList += "</ul>";
}
document.getElementById("suggestions").innerHTML = suggestionList;
document.getElementById("suggestions").style.display = 'block';
}
else {
document.getElementById("suggestions").style.display = 'none';
}
}
}
