warberg Juniormester
19. september 2020 - 12:46 Der er 6 kommentarer og
1 løsning

Autocomplete, vil indsætte link på søgeresultat

Hej Eksperter,

Bokser med en autocomplete.
Eller, jeg bokser med at få et link på resultat, så jeg viderestiller til side.

index:

<html>
<head>
<TITLE>Autocomplete</TITLE>
<head>
<style>
body{width:610px;}
.frmSearch {border: 1px solid #a8d4b1;background-color: #c6f7d0;margin: 2px 0px;padding:40px;border-radius:4px;}
#player-list{float:left;list-style:none;margin-top:-3px;padding:0;width:190px;position: absolute;}
#player-list li{padding: 10px; background: #f0f0f0; border-bottom: #bbb9b9 1px solid;}
#player-list li:hover{background:#ece3d2;cursor: pointer;}
#search-box{padding: 10px;border: #a8d4b1 1px solid;border-radius:4px;}

</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $("#search-box").keyup(function(){
        $.ajax({
        type: "post",
        url: "readPlayer.php",
        data:'keyword='+$(this).val(),
        beforeSend: function(){
            $("#search-box").css("background","#FFF url(/images/LoaderIcon.gif) no-repeat 165px");
        },
        success: function(data){
            $("#suggesstion-box").show();
            $("#suggesstion-box").html(data);
            $("#search-box").css("background","#FFF");
        }
        });
    });
});

function selectPlayer(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}




});

</script>
</head>
<body>

<div class="frmSearch">
<input type="text" id="search-box" placeholder="Spiller" />
<div id="suggesstion-box"></div>

</form>
</div>


</body>
</html>






readPlayer.php:

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
if(!empty($_POST["keyword"])) {
$query ="SELECT * FROM player WHERE navn like '" . $_POST["keyword"] . "%' ORDER BY navn LIMIT 0,6";
$result = $db_handle->runQuery($query);
if(!empty($result)) {
?>
<ul id="player-list">
<?php
foreach($result as $player) {
?>
<li onClick="selectPlayer('<?php echo $player["navn"]; ?>');"><?php echo $player["navn"]; ?></li>
<?php } ?>
</ul>
<?php } } ?>


og ja, så er dbcontroller bare den der connecter til db.
Slater Ekspert
19. september 2020 - 15:30 #1
Først må du nok rydde op i dine kodefejl.
Du har en "});" der bare ligger midt i det hele og ikke er begyndt af noget. Den giver en syntaksfejl i Javascript. Og så har du et </form> tag der ikke afslutter noget, da du ikke har begyndt en form. Det burde ikke betyde noget, men hav styr på det alligevel.

Hvis det ikke er problemet, så bliver du nok nødt til at beskrive lidt nærmere hvad dit problem er og hvad du forventer skal ske.

- Og så skal det nævnes igen: aldrig, ALDRIG putte værdier direkte fra $_POST eller lignende direkte i en database query.
warberg Juniormester
19. september 2020 - 15:37 #2
Nu var jeg nok lidt sløset i mit klipperi.Jeg fik klippet fra en test der ikke var ryddet op i.

Her er det in action https://superstats.dk/auto/

Når et navn er valgt, vil jeg have det valgte til at viderestille til den pågældendes profil-side, via et id, aka spiller.php?id=xx

Giver det mening?
Slater Ekspert
19. september 2020 - 16:40 #3
Ja tak, det er perfekt at få lov at se det virke.

At lave det om til et link er relativt simpelt. Du kan f.eks. udskifte din

<li onClick="selectPlayer('<?php echo $player["navn"]; ?>');"><?php echo $player["navn"]; ?></li>

med

<li><a href="spiller.php?id=<?php echo $player["id"]; ?>"><?php echo $player["navn"]; ?></a></li>

Og så kan du fjerne din selectPlayer-funktion, da den ikke bruges længere, og tilføje noget CSS til at fjerne understregning og blå farve fra linkene, hvis du ikke bryder dig om det.

- Du kan også bruge selectPlayer-funktionen til at viderestille i stedet, hvis du hellere vil det. Men det giver mindre semantisk HTML og dårligere tilgængelighed.
warberg Juniormester
19. september 2020 - 16:44 #4
Hvorfor er det så simplet når jeg ser det... Tak for input
warberg Juniormester
19. september 2020 - 17:30 #5
Hvis du nu skulle bruge selectPlayer til viderestillingen

function selectPlayer(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}

Hvordan vill du gøre det?
Slater Ekspert
19. september 2020 - 18:18 #6
Så skifter du selectPlayer('<?php echo $player["navn"]; ?>'); til $player["id"], så du får id'et med i stedet for navnet, og selectPlayer-funktionen kan så se sådan ud:

function selectPlayer(id) {
  window.location.href = "spiller.php?id=" + id;
}

- Men det er en dårligere løsning fordi den bruger script til noget hvor det ikke behøves, og fordi løsningen så kun kan benyttes med mus, ikke med keyboard.
warberg Juniormester
19. september 2020 - 18:37 #7
Tak!
Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links

Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester





Premium
Skal du tage en Pro eller ej? Sådan vælger du imellem iPhone 12 og 12 Pro
Apples to iPhone-nyheder minder overraskende meget om hinanden. Der er dog væsentlige forskelle, som du skal være opmærksom på, når du vælger.
Computerworld
Det nye MitID er et tigerspring for bedre cybersikkerhed
Klumme: Det nye MitID er en enestående mulighed for et markant løft af it-sikkerheden i danske kommuner. Med baggrund i udfasningen af det nuværende NemID kan de samtidig forbedre og styrke deres it-systemers værn overfor cyberangreb.
CIO
Podcast: Hos Viking Life-Saving Equipment er it gået fra at være backend til at være noget, som kunderne spørger aktivt efter
Podcast, The Digital Edge: Viking leverer en stadig større del af deres produkt som en tjeneste. Som en del af tjenesten tager Viking ansvar for sikkerheden ved at levere, dokumentere og vedligeholde det nødvendige sikkerhedsudstyr. Hør hvordan Henrik Balslev senior digital director hos Viking har løftet den opgave.
Job & Karriere
Regner din ferie væk? Brug tiden på at søge en af disse otte stillinger, der er ledige netop nu
Det sjasker ned over hele Danmark. Du kan bruge de våde sommerdage på at søge et af disse otte job, der er ledige lige nu.
White paper
Forebyg kritiske angreb med moderne autentifikation
Det er nemmest at forebygge kritiske cyberangreb, når medarbejderne kun tilgår data og systemer i sikkerhed bag firewall og øvrige sikkerhedsforanstaltninger. Virkeligheden er imidlertid, at medarbejderne – særligt siden foråret 2020 – i dramatisk stigende omfang arbejder hjemmefra, på alle tider af døgnet og fra enheder ejet af både dem selv og af virksomheden. Det sætter din sikkerhedsinfrastruktur under pres, og en af de mest effektive modforholdsregler er en moderne autentifikationsløsning, så kun rette vedkommende får adgang til forretningskritiske systemer og data. Det kan du læse mere om i denne hvidbog, som også går i dybden med, hvor, hvordan og under hvilke omstændigheder en sådan løsning kan indgå som et effektivt element i din samlede cybersikkerhedsindsats.