Створення поля введення для попереднього введення/автозаповнення/автопропозиції – PHP – Форуми SitePoint

Мені потрібно призначити людей на роботу в проектах. Задіяні 3 таблиці: імена людей, список вакансій і проекти, в яких вони братимуть участь. Те, що я хочу зробити, це

1. введіть ім'я та прізвище особи
2. пошук людини по імені
3. повернути посвідчення особи цієї особи
4. виберіть роботу, яку вони виконуватимуть, і отримайте цей ідентифікатор (у мене вже є спадне меню для цього)
5. введіть jobID та personID у таблицю проекту.

Я хочу переконатися, що введене ім’я введено правильно. Чи можу я використовувати PHP для створення поля введення автопропозицій для імен?

Залежно від того, скільки імен/ідентифікаторів ви переглядаєте, можливо, буде простіше попередньо заповнити змінну JavaScript даними та використовувати їх, а не намагатися пересилати дані туди-сюди під час введення.

Список осіб особливо довгий?

Гаразд, ось приклад, який отримує файл JSON, що містить 1000 співробітників. Може це варіант?

[
  {"id":1,"first_name":"Keven","last_name":"Insole"},
  {"id":2,"first_name":"Carolann","last_name":"D'Hooge"},
  {"id":3,"first_name":"Shepherd","last_name":"Di Maggio"},
  ...
]

Його, очевидно, можна отримати з api.

Відповідно до деяких попередніх прикладів, які я опублікував тут на Sitepoint, я використовую autocomplete.js

Налаштування наступне
HTML

Javascript

// generic function for fetching json data from a url
const fetchJson = async (url) => {
    try {
        const response = await fetch(url);
        return response.json();
    } catch (err) {
        console.error(err);
    }
}

async function main() {
    const employees = await fetchJson('https://assets.codepen.io/3351103/employees.json');
    // Using the employees JSON data: [{"id":1,"first_name":"Keven","last_name":"Insole"}, ...]
    // Create a new array of objects joining "first_name" and "last_name" to make a "fullName" property
    // include employee "id".
    const employeesSearchData = employees.map((employee) => {
        return {
            id: employee.id,
            fullName: `${employee['first_name']} ${employee['last_name']}`
        };
    });

    const autoCompleteJS = new autoComplete({
        selector: "#name",
        data: {
            src: employeesSearchData,
            keys: ['fullName'] // key to use for search
        },
        threshold: 2,
        resultsList: { maxResults: 10 },
        resultItem: { highlight: true },
        events: {
            input: {
                selection(event) {
                    // e.g. {id: 575, fullName: 'Rutherford Dobbie'}
                    const employee = event.detail.selection.value;
                    autoCompleteJS.input.value = employee.fullName;
                    // for illustration purposes
                    document.querySelector('#employee')
                        .textContent = `ID: ${employee.id}, Name: ${employee.fullName}`
                }
            },
        }
    });
    
    // Clear employee, when search is cleared.
    document.querySelector('#name').addEventListener('input', (event) => {
        if (!event.target.value) {
            document.querySelector('#employee').textContent = ""
        }
    })
}

main();

Інформація про використання fetch api