Tilføjelse til ajax script
Hej,I forlængelse af en tidligere tråd (http://www.eksperten.dk/spm/894090), har jeg brug for at udbygge scriptet yderligere. Det jeg har brug for er endnu et input felt på samme side som det nuværende, hvor der kommer suggest (fx film2) og indsættes tilsvarende værdi (fx aar2).
En mulighed kunne være blot at oprette en ny suggest.js hvor relevante felter ændres. Denne løsning har jeg forsøgt mig med, men jeg kan ikke gennemskue hvor i scriptet jeg skal ændre.
Her kommer den nuværende kode:
suggest.php:
<?php
header ('Content-type: text/html; charset=iso-8859-1');
include('xxx);
$userInput = (string) mysqli_real_escape_string($dbc, $_GET["query"]);
$suggestions = "";
$query = "SELECT Film, Aar FROM xxx.xxx WHERE Film LIKE '$userInput%' ORDER BY Film ASC LIMIT 10";
$result = mysqli_query($dbc, $query);
$row = mysqli_fetch_array($result);
$firstResult = true;
$filmene = "var filmene = new Array(\"";
$aarene = "var aarene = new Array(\"";
while ($row) {
$film = $row['Film'];
$aar = $row['Aar'];
$filmene .= $filmene."\",\"";
$aarene .= $aarene."\",\"";
$row = mysqli_fetch_array($result);
}
$filmene = substr( $filmene, 0,-2).");";
$aarene = substr( $aarene, 0,-2).");";
mysqli_free_result($result);
mysqli_close($dbc);
echo $filmene;
echo $aarene;
?>
suggest.js:
var KEYUP = 38;
var KEYDOWN = 40;
var KEYRIGHT = 39;
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(film, aar) {
var cleanName = unescape(film);
var cleanYear = unescape(aar);
document.getElementById("film").value = cleanName;
document.getElementById("aar").value = cleanYear;
emptySuggestions();
}
/** Handles a user typing in the film box. -- Called by film 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 == KEYRIGHT) { // Ny tilføjelse
var list = getList();
// Ny variable
var elementName = "hiddenDiv"+currentlySelectedLi;
handleClick( list[currentlySelectedLi].innerHTML.substring(6), document.getElementById(elementName).innerHTML.substring());
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("Din browser understøtter ikke AJAX.");
return;
}
var url = "inc/suggest.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 != "") {
setfilm();
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 film onfocus. */
function resetCurrentLi() {
currentlySelectedLi = -1;
}
/** Selects the new selected li. Function will change the class to 'hoverLi' and will update the text of film if the updatefilm 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} updatefilm The boolean which tells the function if it should update the film box based on the new li */
function selectLi(list, li, updatefilm) {
list[li].className = "hoverLi";
if (updatefilm) {
setfilm(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 film box based on the currentlySelectedLi. @param {Integer} li The number of the li within the ul using 0 based index (Optional). */
function setfilm(li) {
var list = getList();
if(li >= 0) {
document.getElementById("film").value = list[li].innerHTML.substring(6);
}
else {
document.getElementById("film").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;
eval( xmlHttp.responseText );
var suggestionList = "";
var itemCount = filmene.length;
if(itemCount > 0) {
;
for(var i = 0; i < filmene.length; i++) {
suggestionList += "<li value='" + i + "' class=\"li\" onmouseover=\"newCurrentLi('"+ i +"');\" onclick=\"handleClick('" + escape(filmene[i]) + "','" + escape(aarene[i]) + "');\"> " + filmene[i].substr(0, 30) + "</li><div id=\"hiddenDiv"+i+"\" style=\"display: none\">" + escape(aarene[i]) + "</div>";
}
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';
}
}
}
index.php:
<tr>
<td>Film:</td>
<td><input name="film" id="film" type="text" onfocus="resetCurrentLi();" onkeyup="handleInput(event, this.value);" autocomplete="off" class="film" value="<?php if (!empty($errors)) echo $_POST['film']; ?>" /><br /> <div id="suggestions" style="display: block"> </div></td>
</tr>
<tr>
<td>År:</td>
<td><input name="aar" id="aar" type="text" class="aar" value="<?php if (!empty($errors)) echo $_POST['aar']; ?>"/></td>
</tr>
suggest.css:
.ul
{
width: 155px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid #8996B5;
background-color: #FFFFFF;
position: absolute;
}
.li
{
width: 155px;
height: 15px;
margin: 3px 0px 0px 0px;
padding: 3px 0px 0px 0px;
vertical-align: text-bottom;
position: relative;
font-family: arial;
font-size: 10px;
color: #000;
background-color: #FFFFFF;
cursor: hand;
display: block;
}
.hoverLi
{
width: 155px;
height: 15px;
margin: 3px 0px 0px 0px;
padding: 3px 0px 0px 0px;
vertical-align: text-bottom;
position: relative;
font-family: arial;
font-size: 10px;
color: #FFF;
background-color: #1657FF;
cursor: hand;
display: block;
}
