Δεν μπορώ να βρω με τιποτα πως να κάνω αυτό...

[fidolos]

Έχω ψάξει ολο το ιντερνετ με διάφορους συνδυασμούς, αλλά κατάφερα μια τρύπα στο νερό. Θέλω να κάνω το παρακάτω και εκλειπαρώ όποιος μπορεί να βοηθήσει, είτε λέγοντας μου ακριβώς πως να googlαρω (γιατί προφανώς το ψάχνω λάθος) ή με ένα demo, λιτό αρχείο ή με κάποιο βίντεο.

Λοιπόν έχω φτιάξει μια navbar με bootstrap 4....

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
            <div class="mr-auto order-0">
        <a class="navbar-brand mx-auto" href="#"><img src="logo.png" alt="logo" style="width:160px;"></a>
    </div>
               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button> 
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav ml-auto  mr-auto">
            <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Κατηγορίες
      </a>
      <div class="dropdown-menu">
        <?php include('categories.php') ?>
      </div>
    </li>
        </ul>
    </div>

    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
            <form action="search.php" accept-charset="UTF-8" method="get">
                <div class="input-group">
                    <input type="text" name="search" id="search"  placeholder="Πληκτρολογήστε για αναζήτηση..." class="form-control" >
                    <span class="input-group-btn">
                        <input type="submit" value="Search" class="btn btn-primary" data-disable-with="Search">
                     </span>
                </div>
                
            </form>
    </div>
</nav>

Η αναζήτηση δουλεύει μια χαρά. Δεν θέλω όμως έτσι. Θέλω πληκτρολογώντας κάποιος ένα προιόν, να ξεκινάει απο κάτω να δείχνει λίστα απο την mysql και όσο πληκτρολογεί, τόσο να μειώνεται η λίστα. Όταν στο τέλος επιλέξει αυτό που θέλει, να ανοίγει η καρτέλα του. Θέλω όμως ΜΟΝΟ αν επιλέξει κάτι να ανοίγει η καρτέλα. Αν γράψει ασυναρτησίες και πατήσει εντερ, να μην γίνεται τίποτα. Όπως η αναζήτηση του mixcloud.com, που μόνο επιλέγεις από τα αποτελέσματα που έχει φέρει.

 

 

 

 

 

[Predatorkill]

Κατι τετοιο ας πουμε;

https://phppot.com/jquery/bootstrap-autocomplete-with-dynamic-data-load-using-php-ajax/

στην αναζητηση ψαξε για search filter php bootstrap, search autocomplete php bootstrap και θα βγαλει αρκετα

Επεξ/σία 22 Αυγούστου 2018 από Predatorkill

[fidolos]

Με την πρώτη ματιά αυτό θέλω. Θα δοκιμάσω τώρα. Σε ευχαριστώ πολύ. 

[Predatorkill]

30 λεπτά πριν, fidolos είπε

Με την πρώτη ματιά αυτό θέλω. Θα δοκιμάσω τώρα. Σε ευχαριστώ πολύ. 

Για να μην χτυπαει τη βαση καθε πληκτρο που παταει βαλε ενα debounce 300ms.

διαβασε εδω σχετικα:

https://medium.com/spritle-software/two-things-you-must-do-when-building-your-own-simple-ajax-search-64992d5c9991

[fidolos]

12 ώρες πριν, Predatorkill είπε

Κατι τετοιο ας πουμε;

https://phppot.com/jquery/bootstrap-autocomplete-with-dynamic-data-load-using-php-ajax/

στην αναζητηση ψαξε για search filter php bootstrap, search autocomplete php bootstrap και θα βγαλει αρκετα

 Ωραία, όπως το έψαξα, βρήκα καλύτερα αυτό, το οποίο κάνει αυτό ακριβώς αυτό που θέλω. Μόνο μια ερώτηση. Εγώ έκανα μια σύνδεση 2 πεδίων από την βάση και τα σύνδεσα. Οπότε τώρα στα αποτελέσματα, εμφανίζεται ['πεδιο1'] - ['πεδίο2']. Δηλαδή άλλαξα στο παραπάνω κώδικα από π.χ. από  $data[] = $row["marka"]; σε $data[] = $row["marka"].' - '.$row["montelo"] ; και εμφανίζει και τα 2 στοιχεία τώρα. 

1) Μπορώ όμως να βάλω να εμφανίζεται και η εικόνα του προιόντος μέσα στα αποτελέσματα; π.χ. αν βάλω στο κώδικα  $data[] = $row["image"].'   '.$row["marka"].' - '.$row["montelo"] ;, μου εμφανίζει κανονικά και το ονομα αρχειου πριν. Πως όμως να βάλω την html <img src="images/<?php echo $row['image'];?>" /> ενδιάμεσα?

2) Που βάζω το link ωστε όταν επιλέγεται κάτι από τα απολέσματα, πχ το προιόν με id=1 να τρέχει αυτόματα το redirect στο url που θέλω? πχ. products.php?id=<?php echo $row['id'];?>

[Predatorkill]

Και οι 2 περιπτωσεις που αναφερεις ειναι καθαρα html, δεν θα δυσκολευτεις να βρεις λυση με μια αναζητηση. Δοκιμασε μηπως κανεις inject τα html tags img και a με jquery στις επιλογες που φερνει το dropdown. 

Δεν ξερω πως τα φερνεις/δειχνεις αλλα ενα approach ειναι αυτο πχ: https://www.addwebsolution.com/blog/adding-image-select-list-with-cross-browser-compatibility

Επεξ/σία 22 Αυγούστου 2018 από Predatorkill

[fidolos]

Με τα χίλια ζόρια, κατάφερα με το παρακάτω κώδικα που βρήκα να κάνω αυτό που θέλω ακριβώς. Το μόνο πρόβλημα είναι οτι βάζοντας το στο navbar έπρεπε να φτιάξω εγώ ένα div που να ανοίγει απο κάτω, το οποίο το έκανα absolute στο σημείο που θέλω. Αλλά σε άλλες οθόνες και κατά το responsive, πάει σε διαφορετικά σημεία. 

EDIT: τα εφτιαξα μια χαρα. Σας ευχαριστω πολυ!!!

Επεξ/σία 23 Αυγούστου 2018 από fidolos

[fidolos]

Δυσκολεύομαι αρκετά να φτιάξω το site ωραιο και για mobile. Είναι πολύ λάθος αν φτιάξω διαφορετικές σελίδες για mobile?

Επεξ/σία 27 Αυγούστου 2018 από fidolos