Udbygning af eksisterende ajax script

Jeg vil gerne give et bud. Du skal have ændret i et par af dine filer, nemlig database.php og suggest.js

I database.php skal du ændre følgende i din while loop :

while ($row) {
        $movie_name = $row['movie'];
        $year = $row['year'];
                                             
        if($firstResult) {
            $suggestions = $movie_name." $year";
            $firstResult = false;
        }
        else {
            $suggestions .= "," . $movie_name ." $year";
        }
                                             
        $row = mysqli_fetch_assoc($result);
    }

I suggest.js skal du ændre funktionen handleClick :

function handleClick(selection) {
    var cleanString = unescape(selection);
    document.getElementById("inputText").value = cleanString;
   
    var year = cleanString.substr ( cleanString.length-4, 4);
    document.getElementById("inputText2").value = year;
    emptySuggestions();
   
}

Så burde det virke, hvis du selvfølgelig har lavet en inputbox i din html side, der hedder inputText2 ;)

Læg i øvrigt også mærke til at årstallet bliver skrevet til titlen i den suggestionbox, der kommer frem nu. Dette kan ændres med en substr i funktionen handleClick, hvis du ikke vil have dette.

I øvrige er det ikke den "pæneste" kode, jeg har skrevet,men tror det er den hurtigest måde at få det løst på.

Hej Norsgaard,

Tak for dit bud. Umiddelbart kan jeg dog ikke få det til at virke. Koden i linket jeg henviser fungerer og jeg har indsat inputText2. Men når jeg begynder at skrive i InputText kommer der ingen forslag.
Så vidt jeg tolker koden får du var year ved at trække de sidste fire bogstaver/tal fra variablen der returneres fra php-delen. Da det ikke altid er tale om et årstal (det kan være der står "ukendt" el. "ikke indsat endnu"), vil jeg høre om koden kan tilpasses dette.

Det er helt korrekt at måden jeg finder årstallet på, er at "trække" de sidste 4 cifre ud af sætningen, der kommer tilbage fra php delen. Det var faktisk det jeg mente, med at det var lidt "grim" kode, så det blev jo faktisk hurtigt bevist. :)

Det kan selvfølgelig lade sig gøre, men det kræver nok lidt mere omskrivning af koden, med mindre der er andre, der har et godt forslag selvfølgelig.

Skal også lige have noget helt grundlæggende på plads, virkede din side før, altså hvor man kun fik navnet tilbage og ingen årstal?

Ja, siden virkede fint før.

Hvis det virkede før så kan der jo være 2 ting galt. Enten i php delen eller i javascript delen. Derfor skal vi lige prøve lidt forskelligt. Prøv i første omgang at sætte følgende ind i php delen :

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);
    }

og se om det kommer "til at virke", altså om den bare skriver de sidste 4 bogstaver af film navnet i inputText2.

Jeg ved ikke hvad der gik galt, men de ændringer du postede i #1 virker nu. Dvs. når jeg begynder at skrive kommer mulighederne og ved valg af en af disse indsættes i inputText $movie_name og i inputText2 $year (dvs. de sidste fire bogstaver/tal).

Vil det være meget besværligt at ændre så hele værdien af $year indsættes, istedet for blot de sidste fire cifre/bogstaver?

Hmm, der sker dog det underlige at hvis jeg har tastet a, kommer der resultater med a OG r. Taster jeg b kommer der muligheder som begynder med v. Dette var ikke et problem før ændringerne som du kom med i #1.

Det er ikke min dag i dag. Glem min sidste post - det var en fejl.

Ok, det er perfekt. Så er vi tilbage på sporet igen. Har siddet og tænkt lidt over hvordan man laver det smartest så årstal kommer til at virke med alle former for tekst, skal lige teste lidt kode her for at få det helt på plads, så vender jeg lige tilbage.

En tilføjelse til #6: I inputText vises og indsættes både $movie_name og $year. Det er fint de begge vises (da to film kan have samme titel, men produceret i to forskellige år), men er det muligt kun at få sat $movie_name ind i inputText og så selvfølgelig hele værdien af $year i inputText2?

Det lyder rigtig fint!

Lad os så prøve med den endelige version, hvor $year kommer direkte i inputText2 :)

Har skrevet lidt forklaring som kommentar, håber det giver lidt indblik, hvad jeg har gjort


database.php

Start med at skifte while loopen ud med

    // Laver delen om i php, så det der bliver sendt tilbage til javascript delen ikke længere bliver "Top Gun 1986", men istedet et array, som javascript kan fortolke direkte med eval()

    $names = "var names = new Array(\"";
    $years = "var years = new Array(\"";

    while ($row) {
        $movie_name = $row['movieName'];
        $year = $row['year'];
                                               
        $names .= $movie_name.",\"";
        $years .= $year.",\"";
        $row = mysqli_fetch_assoc($result);
    }

    // Fjerner de ekstra ," i slutningen af den var names = new Array("foo", "bar", "  og afslutter med ); for at lukke syntaxen. Samme med var years, der nu indeholder korseponderende årstal til filmene

    $names = substr( $names, 0,-2).");";
    $years = substr( $years, 0,-2).");";


Derefter så skift linien echo $suggestions; ud med :

    echo $names;
    echo $years;

Så videre til suggest.js

Skift hele stateChanged() funktionen ud med :

function stateChanged() {

    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
       
        suggestionsShown = true;
   
        eval( xmlHttp.responseText );
        var suggestionList = "";
        var itemCount = names.length;
       
   
       
        if(itemCount > 0) {
            ;
            for(var i = 0; i < names.length; i++) {
                suggestionList += "<li value='" + i + "' class=\"li\" onmouseover=\"newCurrentLi(this.value);\" onclick=\"handleClick('" + escape(names[i]) + "','" + escape(years[i]) + "');\">&nbsp;" + names[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';
       
        }
       
    }
   
}

Og hele handleClick() ud med :

function handleClick(name, year) {
    var cleanName = unescape(name);
    var cleanYear = unescape(year);
    document.getElementById("inputText").value = cleanName;
    document.getElementById("inputText2").value = cleanYear;
    emptySuggestions();
   
}

Håber det virker, jeg kan få det til at virke lokalt, så det burde det forhåbenligt også kunne lade sig gøre at få til at virke hos dig ;)

Når jeg begynder at skrive i inputText sker intet.

Jeg er lidt i tvivl om eksperten "har spist" noget af koden du har skrevet

Burde være der det hele, tror det smarteste på nuværende tidspunkt er at du sender hele din kode, ligesom du gjorde i det andet spørgsmål, så kan jeg rette det til, og sende det tilbage til dig. ;)

Det er "kun" filerne database.php og suggest.js der er nødvendige at få op.

database.php:
<?php                           
    $databaseConnect = mysqli_connect("xxx")
        Or die("Unable to connect to the database.");
                                                                       
    $userInput = $_GET["query"];
    $suggestions = "";
                                                       
    $query = "SELECT movieName, year FROM Film WHERE movieName LIKE '$userInput%' LIMIT 10";
                             
    $result = mysqli_query($databaseConnect, $query);
    $row = mysqli_fetch_assoc($result);
   
    $firstResult = true;

    $names = "var names = new Array(\"";
    $years = "var years = new Array(\"";

    while ($row) {
        $movie_name = $row['movieName'];
        $year = $row['year'];
                                             
        $names .= $movie_name.",\"";
        $years .= $year.",\"";
        $row = mysqli_fetch_assoc($result);
    }

    $names = substr( $names, 0,-2).");";
    $years = substr( $years, 0,-2).");";
                                               
    mysqli_free_result($result);
   
    mysqli_close($databaseConnect);
   
    echo $names;
    echo $years;
?>

suggest.js:
var KEYUP = 38;
var KEYDOWN = 40;
var KEYENTER = 13;
var KEYTAB = 9;

var xmlHttp;
var suggestionsShown = false;
var currentlySelectedLi = -1;

function deselectLi(list, li) {
    if(li != -1) {
        list[li].className = "li";
    }
}

function emptySuggestions() {

    document.getElementById("suggestions").innerHTML = "";
    document.getElementById("suggestions").style.display = 'none';
   
}

function getList() {
   
    return document.getElementById("suggestions").getElementsByTagName("li");
   
}

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;
   
}

function handleClick(name, year) {
    var cleanName = unescape(name);
    var cleanYear = unescape(year);
    document.getElementById("inputText").value = cleanName;
    document.getElementById("inputText2").value = cleanYear;
    emptySuggestions();
 
}

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);
   
}

function handleTab(e) {
   
    var theEvent = e || window.event;
   
    if(theEvent.keyCode == KEYTAB && document.getElementById("suggestions").innerHTML != "") {
        setInputText();
        emptySuggestions();
    }
   
}

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);
        }
    }
}

function resetCurrentLi() {
    currentlySelectedLi = -1;
}

function selectLi(list, li, updateInputText) {
    list[li].className = "hoverLi";
   
    if (updateInputText) {
        setInputText(li);
    }
}

function setCurrentLi(li) {
    currentlySelectedLi = li;
}

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);
    }
 
}

function stateChanged() {

    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
     
        suggestionsShown = true;
 
        eval( xmlHttp.responseText );
        var suggestionList = "";
        var itemCount = names.length;
     
 
     
        if(itemCount > 0) {
            ;
            for(var i = 0; i < names.length; i++) {
                suggestionList += "<li value='" + i + "' class=\"li\" onmouseover=\"newCurrentLi(this.value);\" onclick=\"handleClick('" + escape(names[i]) + "','" + escape(years[i]) + "');\"> " + names[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';
     
        }
     
    }
 
}

Har kigget lidt på den og er gået lidt dø, burde virke, så skal lige have dig til at prøve at ændre den eval( xmlHttp.responseText ); under funktionen stateChanged() til alert( xmlHttp.responseText );

Så burde den komme med en alertbox, hvis der kommer noget tilbage fra php delen.

Hvis der kommer noget tilbage i alert'en må du gerne lige copy-paste den hertil.

var names = new Array(Top Gun,"Ghostbusters);var years = new Array(1986,"Ikke indsat endnu);

Hmm det var mærkeligt. Det er der fejlen er, den burde hedde :

var names = new Array("Top Gun","Ghostbusters");var years = new Array("1986","Ikke indsat endnu");

Nå, jeg må tilbage og kigge på lidt kode, og se om jeg kan finde fejl ;)

Prøv endnu engang

Prøv med :

        $names .= $movie_name."\",\"";
        $years .= $year."\",\"";

inden i while løkken.

Tror den er der nu ;)

Jeg har ændret til:
    $names = substr( $names, 0,-2)."\");";
    $years = substr( $years, 0,-2)."\");";

og får nu fejlmeddelelsen:

var names = new Array("Top Gun,"Ghostbusters");var years = new Array("1986,"Ikke indsat endnu");

Super! Så fungerer det!

Perfekt. Det var godt nok noget ping-pong frem og tilbage, men godt det endelig virker :)

Tusind tak for hjælpen - smid svar!

Var så lidt, skulle det være en anden gang :)

et tillægsspørgsmål:
når jeg begynder at skrive i feltet kommer mulighederne og jeg klikker med musen og filmnavn og år bliver indsat i hhv. inputText og inputText2.

Jeg havde troet resultatet var det samme hvis jeg navigerede med piletasterne og trykkede tab eller enter, men det er det ikke.

Er det let at lave? Ellers opretter jeg et nyt spørgsmål.

Der er 2 "problemer" med at bruge Enter og Tab tasten til at "vælge" en film.

Det første er at listen, der kommer frem er at den er lavet som en <LI> liste, og det i princippet kun er tekst, der bliver skrevet i den, og man derfor hele tiden skal fortælle, hvad der skal ske hvis enten man klikker, bruger piltaster, kører musen hen over osv. Hvis man f.eks havde en dropdown liste <SELECT> ville mange af disse funktioner allerede være "bygget ind i" denne.

Andet problem, er at ENTER og TAB tasterne er allerede "brugt" til noget i browser vinduet, nemlig ENTER = klikke på Search knappen. Ved dog ikke om du bruger denne på din side ? For det andet er TAB knappen brugt til at hoppe frem og tilbage imellem input fields, altså både input text, knapper, links osv.

Må indrømme at jeg ikke ved om der er en måde man kan snyde browseren på, så at man får lov at styre disse events selv i første omgang. Eller lad mig omformulere det, selvfølgelig er der en måde man kan dette på, men jeg ved ikke hvordan. ;)

Ok, tak for din grundige forklaring. Jeg må se om jeg kan finde en alternativ løsning.

Har lavet en løsning, der virker med ENTER, dog med det forbehold at du ikke har en SUBMIT knap i forbindelse med inputText boksene. Så sig til, hvis du vil se funktionen.

Det lyder bestemt interessant. Den vil jeg meget gerne se.

Okay, du skal tilføje ændre funktion handleInput til :

function handleInput(e, userInput) {
   
    var theEvent = e || window.event;
   
    if (userInput.length == 0) {
        emptySuggestions();
        return;
    }

    // Ny tilføjelse
 
    if (theEvent.keyCode == KEYENTER) {
        var list = getList();
        handleClick( list[currentlySelectedLi].innerHTML.substring(6), list[currentlySelectedLi].value);
        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);
   
}

og så skal der lige ændres lidt i en enkelt linie i stateChanged, der nu skal hedde :


suggestionList += "<li value='" + escape(years[i]) + "' class=\"li\" onmouseover=\"newCurrentLi('"+ i +"');\" onclick=\"handleClick('" + escape(names[i]) + "','" + escape(years[i]) + "');\">&nbsp;" + names[i].substr(0, 30) + "</li>";

Inde i for(var i = 0; i < names.length; i++) { løkken.

Tak, når jeg vælger en fra listen bliver den korrekt indsat i inputText, men der indsættes -1 i inputText2. Jeg prøver igen.

Og du fik

suggestionList += "<li value='" + escape(years[i]) + "' class=\"li\" onmouseover=\"newCurrentLi('"+ i +"');\" onclick=\"handleClick('" + escape(names[i]) + "','" + escape(years[i]) + "');\">&nbsp;" + names[i].substr(0, 30) + "</li>";

lagt ind?

Hvis du gjorde prøv at ændre den til :


suggestionList += "<li value='123' class=\"li\" onmouseover=\"newCurrentLi('"+ i +"');\" onclick=\"handleClick('" + escape(names[i]) + "','" + escape(years[i]) + "');\">&nbsp;" + names[i].substr(0, 30) + "</li>";

Og så se om du får 123 i inputtext2.

Ja, den linie fik jeg sat ind. Hvis jeg ændre til dit forslag får jeg også 123 i inputText2.

Men ændrer jeg li value='123' til li value='abc', får jeg igen -1 i inputText2.

Meget underligt. Prøv at ændre denne tilbage :


suggestionList += "<li value='" + escape(years[i]) + "' class=\"li\" onmouseover=\"newCurrentLi('"+ i +"');\" onclick=\"handleClick('" + escape(names[i]) + "','" + escape(years[i]) + "');\">&nbsp;" + names[i].substr(0, 30) + "</li>";


Og så prøv lige at ændre følgende :

    if (theEvent.keyCode == KEYENTER) {
   
        var list = getList();
        alert( list[currentlySelectedLi].value );
        handleClick( list[currentlySelectedLi].innerHTML.substring(6), list[currentlySelectedLi].value);
        return;
     
    }

Og se om der kommer en "fejl boks" med årstallet eller -1 når du trykker enter

Der kommer en fejlboks med -1.

Og det er kun ved enter at den viser -1 og ikke årstallet, altså hvis du klikker med musen, om det virker?

Det er kun når jeg trykker enter problemet er der, det virker fint med klik med mus.

Ah havde lige overset din post #35, det er jo en vigtig ting. Lad mig lige undersøge det lidt ;)

Okay, havde fundet fejlen. Det var mig, der har lavet en bummert :/

Grunden til fejlen, skyldes at jeg endnu en gang havde glemt at du ikke kun havde tal i $years, og at value på en <li> tag kun må ind holde tal (i øvrigt er attributen slet ikke i brug mere, så det var lidt et workaround, jeg havde lavet).

Skal lige tilbage og tænke på en anden løsning så. ;)

Ok, det er helt iorden.

Så prøver vi igen. Nu har jeg også testet her men årstal og bogstaver :)

Ændrer følgende :

    if (theEvent.keyCode == KEYENTER) {
        var list = getList();
        // Ny variable
        var elementName = "hiddenDiv"+currentlySelectedLi;
        handleClick( list[currentlySelectedLi].innerHTML.substring(6), document.getElementById(elementName).innerHTML.substring());
        return;
       
    }

og ændre linien :

                suggestionList += "<li value='" + i + "' class=\"li\" onmouseover=\"newCurrentLi('"+ i +"');\" onclick=\"handleClick('" + escape(names[i]) + "','" + escape(years[i]) + "');\">&nbsp;" + names[i].substr(0, 30) + "</li><div id=\"hiddenDiv"+i+"\" style=\"display: none\">" + escape(years[i])+" </div>";

Skal igen siges, at vi er på et punkt nu, hvor det er "grimt" kodning, men jeg har lidt på fornemmelsen at det ikke betyder så meget, hvis det bare virker ?

Fantastisk, så virker det :) Det vigtigste, i første omgang, er at det virke.
Mange tak for hjælpen!