Adding options to datalist from Mysql Table records.

const list = document.querySelector('#city2');

async function loadCities() {
    const response = await fetch('city-list-ajaxck.php', {headers: {'Accept': 'application/json'}});
    const cities = await response.json();

    list.replaceChildren(...cities.map(city => new Option(city.name, city.name)));
}

document.querySelector('#loadCities').addEventListener('click', loadCities);

Sample table

Loading data

require "config.php"; // Database Connection 

echo "<input id="city" list="city1" >
<datalist id="city1" >";

$sql="select city from city ";  // Query to collect records

foreach ($dbo->query($sql) as $row) {
$city = htmlspecialchars((string) $row['city'], ENT_QUOTES, 'UTF-8');
echo "<option value=\"{$city}"></option>"; // Escape database output
}

echo "</datalist>";

Using Ajax

The Ajax version requests the city list as JSON and adds each returned value with the DOM Option constructor. This keeps database values out of HTML string concatenation.

<input id="cityAjax" list="city2">
<datalist id="city2"></datalist>
<button type="button" id="loadCities">Add Options</button>

const list = document.querySelector('#city2');

async function loadCities() {
    const response = await fetch('city-list-ajaxck.php', {
        headers: {'Accept': 'application/json'}
    });
    if (!response.ok) throw new Error('Unable to load cities');

    const cities = await response.json();
    list.replaceChildren(...cities.map(city => new Option(city, city)));
}

document.querySelector('#loadCities').addEventListener('click', loadCities);

The endpoint can return the city column as JSON:

<?php
require 'config.php';
header('Content-Type: application/json; charset=UTF-8');

$stmt = $dbo->query('SELECT city FROM city ORDER BY city');
$cities = $stmt->fetchAll(PDO::FETCH_COLUMN);
echo json_encode($cities, JSON_UNESCAPED_UNICODE | JSON_THROW_ON_ERROR);
?>

The live example below uses the same JSON response shape.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: