PHP CRUD Dropdown with Search to Populate Field

[CarpeCodice]

Hi!

I have this typical CRUD project that I am working on, and this is the ADD RECORD page:


What I am struggling to figure out is how to convert the SUPPLIER field into a searchable drop-down list - so you can "search-as-you-type" the supplier name. For example, if you start typing "so" it should filter the list to anything with that combination of letters (see below) - and then you can select one of those results to populate the field - without the possibility of entering manually a new supplier:

Solbel
Matsol
Uniso

Here is the table structure from MySQL:


Here is the code for this page - I would appreciate any help - thank you in advance!

<?php

    session_start();

?>

<?php include('includes/header.php'); ?>

    <h1>Costing System</h1>

    <div class="container mt-5">

        <?php include('message.php'); ?>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4>Add Market Price
                            <a href="marketprices.php" class="btn btn-danger float-end">BACK</a>
                        </h4>
                    </div>
                    <div class="card-body">
                        <form action="code.php" method="POST">
                            <div class="mb-3">
                                <label>Supplier</label>
                                <input type="text" name="supplier" class="form-control">
                            </div>
                            <div class="mb-3">
                                <label>Purchase Unit [Primary]</label>
                                <input type="number" name="p_unit_primary" class="form-control">
                            </div>
                            <div class="mb-3">
                                <label>Purchase Unit [Secondary]</label>
                                <input type="number" name="p_unit_secondary" class="form-control">
                            </div>
                            <div class="mb-3">
                                <label>Purchase Unit [Unit]</label>
                                <input type="text" name="p_unit_unit" class="form-control">
                            </div>
                            <div class="mb-3">
                                <label>Price</label>
                                <input type="number" name="price" class="form-control">
                            </div>
                            <div class="mb-3">
                                <label>Price Date</label>
                                <input type="date" name="price_date" class="form-control">
                            </div>
                            <div class="mb-3">
                                <label>Notes</label>
                                <input type="text" name="notes" class="form-control">
                            </div>
                            <div class="mb-3">
                                <button type="submit" name="add-marketprice" class="btn btn-primary">Add Market Price</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <?php include('includes/footer.php'); ?>

 

[DaniWeb]

If you want the field to be dynamic, you will need to use javascript.

The library that I personally use to achieve this is GitHub - twitter/typeahead.js: typeahead.js is a fast and fully-featured autocomplete library but there are many options. The one I use hasn't been updated in nearly a decade so it's probably not the best out there, to be honest.

On the other hand, if you just want a very typical HTML dropdown list (not anything fancy), you would do something like this:

<select name="supplier">
  <?php foreach ($suppliers AS $supplier): ?>
    <option value="<?= $supplier->id ?>"><?= $supplier->suppliername ?></option>
  <?php endforeach; ?>
</select>

The end-user will select from a dropdown list of supplier names, but the ID for the supplier will be what's passed back in the HTTP request.

Note that this uses PHP short tags, which need to be enabled on your web server. If you don't have short tags enabled, then use <?php echo ... ?> instead of <?= ....

You'll also notice this code has a variable $suppliers. The SQL for this would look something like:

SELECT DISTINCT id, suppliername
FROM suppliers

Hope this helps. Good luck!