CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
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
prøv at søge på noget typeahead (som #2 er inde på) eller noget autocomplete

feks
https://www.google.com/search?q=php+typeahead
https://www.google.com/search?q=php+autocomplete

du vil nok med fordel kunne kigge på noget AJAX, så du søger i databasen istedet for en js fil, dermed ikke sagt du slipper for js, da ca 75% af AJAX er js, hvis det bruges rigtigt, dvs kun dataoverførsel, og ingen html/formatering
ref https://www.google.com/search?q=php+autocomplete+ajax+mysql
https://www.codexworld.com/autocomplete-textbox-using-jquery-php-mysql/
https://makitweb.com/jquery-ui-autocomplete-with-php-and-ajax/

ref https://www.google.com/search?q=php+mysql+ajax+autocomplete+dropdown&oq=php+mysql+ajax+autocomplete+dropdown
https://phppot.com/demo/bootstrap-autocomplete-with-dynamic-data-load-using-php-ajax/
https://daveismyname.blog/autocomplete-with-php-mysql-and-jquery-ui
https://www.computerworld.dk/eksperten/spm/1015497

en gammel guide, bryder med princippet om ikke at retunerer html, og anvender det gamle mysql API
http://www.udvikleren.dk/artikler/374/dynamisk-indhold-med-ajax-og-php/
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML 2 30/10/202409:37 30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML 2 29/09/202410:58 30/09/202412:04
Bredde på div elementer Af dane022 i HTML 2 16/02/202408:29 20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML 2 21/12/202322:51 22/12/202308:03
validering <input tlfnr. Af slein55 i HTML 5 15/10/202311:43 15/10/202314:51
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 15:56 Navigation i Peugeot 3-2008 fra 2017 Af arnepedersen i Andet software
I dag 14:10 Outlook henter ikke mails Af TTA i Office & Kontorpakker
I dag 13:58 vise billeder i kartotek med store ikoner inklusive optagelsesdato Af Malm i Billedbehandling
I dag 13:35 Adobe Elements 2019, Organizer Crasher Af mort1 i Billedbehandling
I går 20:49 pop up black friday Af Malm i Virus
White papers
Flere white papers »


Premium
Teaser billede
Vil købe tele-løsninger til det offentlige for 370 millioner kroner
Læs mere »
Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"
Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen
Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet
Se alle »
Computerworld
Teaser billede
Microsofts nye pc er ekstrem billig – men kan blive ekstrem sikker og fleksibel
Læs mere »
Test: Prøv kun disse B&O-hovedtelefoner, hvis du har råd
Kæmpe datalæk på hospital: 750.000 patienters fortrolige data lækket
Telegigant klar med AI-baseret mormor: Holder telefon-svindlere fast i røret med sniksnak og dumme spørgsmål
Se alle »
CIO
Teaser billede
Konsulenthus vil rulle Microsoft 365 Copilot ud til 200.000 ansatte
Læs mere »
Kæmpe-opgave for Danske Bank har banet vej for fuldautomatiseret migrering til cloud: Nu udbredes metoden i hele AWS
Microsofts store årlige event: De tre vigtigste nøglebudskaber fra Satya Nadella om Microsofts fremtid
Tre vigtige erkendelser, som Computerworld tog med hjem fra Gartners store topmøde i Barcelona
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Efter skelsættende møde med sportscoach: Stor dansk it-arbejdsplads indfører fredags-fri og isbade i arbejdstiden
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Topchef Sara Green mener, at der er brug for et radikalt nyt syn på it-ledelse - særligt én ny trend hader hun som pesten
Se alle »
White paper
Teaser billede
Sikkerhed uden grænser: Cisco Hypershield
Læs mere »
Vær proaktiv og prioritér IT-sikkerheden – før det er for sent
Cyberstatus 2024: Her er truslerne – og her forbereder virksomhederne sig
Styrk compliance, sikkerhed og overblik med ét hug
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »