Avatar billede lefsa62 Seniormester
06. marts 2019 - 12:42 Der er 12 kommentarer og
1 løsning

Søge funktion i Dropdown

Jeg har en dropdown til at hente ting fra mysql db men jeg søger efter at jeg også kan søge manuelt i dropdown med tastatur. Er der nogle som har en god ide
Avatar billede lefsa62 Seniormester
06. marts 2019 - 12:44 #1
Den ser sådan ud

<?php
include "../debug.php";
require_once "../connect.php";
?>
<style>

</style>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Finans-dk</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" media="screen" href="../style.css" />
    </head>
    <body>
    <style>
input[type=text], select {
  width: 30%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 30%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #F8F8FF;
}

div {
  border-radius: 5px;
  background-color: #F8F8ff;
  padding: 20px;
}
</style>
<style>
    header {
        background: #003366;
    }
    button[name=register_btn] {
        background: #003366;
    }
    table {
  width:100%;
}
table{
font-family: arial, sans-serif;
  border-collapse: collapse;
  width: auto;
  font-size: 14px;
  margin-bottom: 30px;
  border: 1px solid black;
}

td, tr {
  border: 1px solid black;
  text-align: left;
  padding: 8px;
  margin: 10px;
  width:auto;
 
}
th{
    border: 1px solid black;
  text-align: left;
  padding: 8px;
  margin: 10px;
  height: 20px; 
}
tr{
    margin: 10px;
}

th {
  background-color: #dddddd;
  padding:10px;
}
.company{
    float: right;
}
    </style>
    <div id="hallo">
    <div class="col-12 col-s-12 branding">
        <h1>Finans-dk.dk<h1>
        </div>
        <section>
        <div class="col-2 col-s-2 menu">
            <a href="../../index.php">Hjem</a>
        </div>
        </section>
        <section>
            <table class="col-3 col-s-3 debitorfont">
            <form action="visdebitor.php" method="POST">
    <select name="account">
    <?php
    $sqlselect = "select * from debitor";
        $resultselect = $conn->query($sqlselect) or die($conn->error);
        while ($rowselect = $resultselect->fetch_assoc()) { ?>
            <option value="<?php echo $rowselect['account'];?>" name="account"><?php echo $rowselect['account'];?></option>
        <?php }; ?>
    </select>
    <input type="submit" value="Hent" name="submitkunde">

</form>   
<?php
        if(isset($_POST['submitkunde'])){
            $account  = $_POST['account'];
            $sqltable = "select * from debitor WHERE account = '$account'";
            $resulttable = $conn->query($sqltable) or die($conn->error);
            while ($rowtable = $resulttable->fetch_assoc()) { ?>
               
                <tr class="debitor"></tr>
                    <tr><th>Konto</th>
                        <th>Navn</th>
                        <th>Adress</th>
                        <th>Adres</th>
                        <th>Postnr</th>
                        <th>by</th>
                        <th>Email</th>
                        <th>Telefon</th>
                        <th>Attension</th>
                        <th>Landekode</th>
                        <th>Betalingfrist</th>
                        <th>BetalingMetode</th>
                        <th>Moms</th>
               
                <tr>
                    <td class="account"><?php echo $rowtable['account']; ?></td>
                  <td><?php echo $rowtable['name']; ?></td>
                    <td><?php echo $rowtable['adress']; ?></td>
                    <td><?php echo $rowtable['adresse']; ?></td>
                    <td><?php echo $rowtable['zipcode']; ?></td>
                    <td><?php echo $rowtable['city']; ?></td>
                    <td><?php echo $rowtable['email']; ?></td>
                    <td><?php echo $rowtable['telephone']; ?></td>
                    <td><?php echo $rowtable['attention']; ?></td>
                 
                    <td><?php echo $rowtable['countrycode']; ?></td>
                    <td><?php echo $rowtable['paymentdeadline']; ?></td>
                    <td><?php echo $rowtable['paymentmethod']; ?></td>
                    <td><?php echo $rowtable['vat']; ?></td>
                </tr>
           
               
            <?php } ?>
        <?php }
    ?>
            </table>
                </div>
    </body>
</html>
Avatar billede Slater Ekspert
06. marts 2019 - 12:55 #2
Mener du typeahead søgning, som f.eks. dette? https://twitter.github.io/typeahead.js


- Og din kode er pivåben for SQL injections. Aldrig, aldrig, aldrig bruge data direkte fra brugerstyrede parametre i dine SQL-sætninger. Rens dem eller brug parametre.
Avatar billede Slettet bruger
06. marts 2019 - 12:55 #3
hvad mener du ?
hvis det er en oversigt over lande, går den til danmark (eller d) når du trykker d.

et søgefelt som er tomt og hvor der kan indtastes, kan mig bekendt ikke være et medlem af en dropdown liste..

du kan jo istedet placere et søgefelt øverst, og så droplisten nedenunder
Avatar billede lefsa62 Seniormester
06. marts 2019 - 13:18 #4
Nu søger den med klikke på dropdown. Hvis jeg tilføjer at den skal søge på flere enheder så skal jeg kunne også skrive eksempel brød eller vand i dropdown  så vil pågældende tings nr komme frem. Det kunne være jeg ikke kunne huske nr men huske hvad den heder
Avatar billede olsensweb.dk Ekspert
06. marts 2019 - 13:42 #5
Avatar billede Rune1983 Ekspert
06. marts 2019 - 13:48 #6
Har et gammelt eksempel her du måske kan anvende.
Har et tekstfejlt som filtrere combobox data.
Fyld nogle flere option data ind og afprøv det selv.

<div style="width: 100%; float: left;">
    <div style="float: left;">
    <input style="width: 400px; height: 30px; font-size: 16px;" id="search_inputNy" onkeyup="SplitOrdNy();" value="" placeholder="Filtrer nedenfor. (Max 5 ord)">
    </div>
    <input id="TextNy1" type="hidden" />
    <input id="TextNy2" type="hidden" />
    <input id="TextNy3" type="hidden" />
    <input id="TextNy4" type="hidden" />
    <input id="TextNy5" type="hidden" />
</div>
<div style="width: 100%; float: left;">
    <select id="SelectCombobox" name="SelectCombobox">
        <option value=""></option>
    </select>
    <script type="text/javascript">
        function SplitOrdNy(){
            var search_input = document.getElementById("search_inputNy").value;
            words = search_input.split(' ');
            var Text1 = document.getElementById("TextNy1");
            var Text2 = document.getElementById("TextNy2");
            var Text3 = document.getElementById("TextNy3");
            var Text4 = document.getElementById("TextNy4");
            var Text5 = document.getElementById("TextNy5");
            if(words[0] != ""){    Text1.value = words[0]; }else{ Text1.value = ""; }
            if(words[0] != ""){    Text2.value = words[1]; }else{ Text2.value = ""; }
            if(words[0] != ""){    Text3.value = words[2]; }else{ Text3.value = ""; }
            if(words[0] != ""){    Text4.value = words[3]; }else{ Text4.value = ""; }
            if(words[0] != ""){    Text5.value = words[4]; }else{ Text5.value = ""; }
        }


      $(document).ready(function () {
        //copy options
        var options = $('#SelectCombobox option').clone();
        //react on keyup in textbox
        $('#search_inputNy').keyup(function () {
            $('#SelectCombobox').empty();
            var val = $('#TextNy1').val().toLowerCase();
            var val2 = $('#TextNy2').val().toLowerCase();
            var val3 = $('#TextNy3').val().toLowerCase();
            var val4 = $('#TextNy4').val().toLowerCase();
            var val5 = $('#TextNy5').val().toLowerCase();
            //take only the options containing your filter text or all if empty
            options.filter(function (idx, el) {
                if(val5 != "undefined"){
                    return val === '' || (
                        $(el).text().toLowerCase().indexOf(val) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val2) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val3) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val4) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val5) >= 0);
                }else if(val4 != "undefined"){
                    return val === '' || (
                        $(el).text().toLowerCase().indexOf(val) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val2) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val3) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val4) >= 0);
                }else if(val3 != "undefined"){
                    return val === '' || (
                        $(el).text().toLowerCase().indexOf(val) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val2) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val3) >= 0);
                }else if(val2 != "undefined"){
                    return val === '' || (
                        $(el).text().toLowerCase().indexOf(val) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val2) >= 0);
                }else{
                    return val === '' || (
                        $(el).text().toLowerCase().indexOf(val) >= 0);
                }
            }).appendTo('#SelectCombobox');//add it to list
        });
    });
    </script>
</div>
Avatar billede Rune1983 Ekspert
06. marts 2019 - 14:47 #7
Hov der mangler jquery script i toppen

Se mit eksempel nedenfor her. Det er testet. Kopiere og sæt ind. og prøv så filtrer combobox med fx. "jyl"

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div style="width: 100%; float: left;">
    <div style="float: left;">
    <input style="width: 400px; height: 30px; font-size: 16px;" id="search_inputNy" onkeyup="SplitOrdNy();" value="" placeholder="Filtrer nedenfor. (Max 5 ord)">
    </div>
    <input id="TextNy1" type="hidden" name="TextNy1" value="" />
    <input id="TextNy2" type="hidden" name="TextNy1" value="" />
    <input id="TextNy3" type="hidden" name="TextNy1" value="" />
    <input id="TextNy4" type="hidden" name="TextNy1" value="" />
    <input id="TextNy5" type="hidden" name="TextNy1" value="" />
</div>
<div style="width: 100%; float: left;">
    <select id="SelectCombobox" name="SelectCombobox">
    <option value=""></option>
    <option value="Odense - Fyn">Odense - Fyn</option>
    <option value="Bogense - Fyn">Bogense - Fyn</option>
    <option value="Esbjerg - Jylland">Esbjerg - Jylland</option>
    <option value="Århus - Jylland">Århus - Jylland</option>
    <option value="København - Sjælland">København - Sjælland</option>
    <option value="Roskilde - Sjælland">Roskilde - Sjælland</option>
    </select>
    <script type="text/javascript">
        function SplitOrdNy(){
            var search_input = document.getElementById("search_inputNy").value;
            words = search_input.split(' ');
            var Text1 = document.getElementById("TextNy1");
            var Text2 = document.getElementById("TextNy2");
            var Text3 = document.getElementById("TextNy3");
            var Text4 = document.getElementById("TextNy4");
            var Text5 = document.getElementById("TextNy5");
            if(words[0] != ""){    Text1.value = words[0]; }else{ Text1.value = ""; }
            if(words[0] != ""){    Text2.value = words[1]; }else{ Text2.value = ""; }
            if(words[0] != ""){    Text3.value = words[2]; }else{ Text3.value = ""; }
            if(words[0] != ""){    Text4.value = words[3]; }else{ Text4.value = ""; }
            if(words[0] != ""){    Text5.value = words[4]; }else{ Text5.value = ""; }
        }


      $(document).ready(function () {
        //copy options
        var options = $('#SelectCombobox option').clone();
        //react on keyup in textbox
        $('#search_inputNy').keyup(function () {
            $('#SelectCombobox').empty();
            var val = $('#TextNy1').val().toLowerCase();
            var val2 = $('#TextNy2').val().toLowerCase();
            var val3 = $('#TextNy3').val().toLowerCase();
            var val4 = $('#TextNy4').val().toLowerCase();
            var val5 = $('#TextNy5').val().toLowerCase();
            //take only the options containing your filter text or all if empty
            options.filter(function (idx, el) {
                if(val5 != "undefined"){
                    return val === '' || (
                        $(el).text().toLowerCase().indexOf(val) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val2) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val3) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val4) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val5) >= 0);
                }else if(val4 != "undefined"){
                    return val === '' || (
                        $(el).text().toLowerCase().indexOf(val) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val2) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val3) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val4) >= 0);
                }else if(val3 != "undefined"){
                    return val === '' || (
                        $(el).text().toLowerCase().indexOf(val) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val2) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val3) >= 0);
                }else if(val2 != "undefined"){
                    return val === '' || (
                        $(el).text().toLowerCase().indexOf(val) >= 0 &&
                        $(el).text().toLowerCase().indexOf(val2) >= 0);
                }else{
                    return val === '' || (
                        $(el).text().toLowerCase().indexOf(val) >= 0);
                }
            }).appendTo('#SelectCombobox');//add it to list
        });
    });
    </script>
</div>
Avatar billede lefsa62 Seniormester
06. marts 2019 - 18:40 #8
Den side lagede ud er vis funktion fra mysql. det jeg skulle bruge er en streng sådan jeg også kunne søge i den manuelt Når jeg ikke kunne huske nummeret. Jeg har ikke fået et brugbart forslag
Avatar billede Slater Ekspert
07. marts 2019 - 08:00 #9
Grunden til at du ikke får brugbare forslag, er nok at du er meget dårlig til at forklare hvad du ønsker, og vende tilbage på de forslag og spørgsmål du får.

Flere har spurgt om uddybning og kommet med forslag, og du har på ingen måde forklaret hvad der var galt i de forslag, eller bedre forklaret hvad du mener.
Avatar billede lefsa62 Seniormester
07. marts 2019 - 09:03 #10
Det jeg spurte om nogle havde et forslag til den dropdown jeg har. om nogle der havde et lille streng sådan når jeg satte markøren på dropdown feltet så ville jeg have det sådan jeg fik valget om jeg vil trykke på den eller skrive i den, det ved jeg ikke om det kan lade sig gøre
Avatar billede lefsa62 Seniormester
07. marts 2019 - 10:38 #11
Til Rune 1983

Hvis jeg skulle bruge den som du foreslog. Min søger i dB og henter det jeg ønsker og så kan jeg trykke på formen så får jeg de foreslog som ligger og trykke på submit så skriver den det ud på siden,  men der kunne jeg lige det som din kunne ved at også skrive i text feldtet så kom det frem og så skal jeg selfølgelig kunne trykke på submit og udskrive på siden
Avatar billede Rune1983 Ekspert
07. marts 2019 - 11:08 #12
Tekstfeltet fungere som et filter i combobox. Den filtrere udfra hvad du skriver i tekstfeltet.
Så filtrer på kundenavn og klik så i combobox. Så vil du opdage der er mindre options.
Avatar billede lefsa62 Seniormester
07. marts 2019 - 20:37 #13
Problemet er løst ved extern hjælp
Avatar billede 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. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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