Заполнение нескольких полей ввода из MySQL при вводе

Question

Множество мест, на которые можно посмотреть с большим количеством идей, как это сделать, но я не преуспеваю ни с одним из них.

У меня есть поле ввода, называемое «позывной», когда вы вводите его, оно выходит на таблицу MySQL и возвращает предложения на основе того, что вы уже набрали. Я хочу, чтобы подсказки о том, какое значение должно появиться в поле ввода, чтобы я мог выбрать один из них или просто набирать текст. Когда я выбираю тот, который мне нужен, я также хочу, чтобы поле Fname заполнилось, оно также возвращается из MySQL, см. XML ниже.

Я действительно хочу узнать, как это сделать, но длинное объяснение с использованием терминов, которые я только понимаю, не будет идти почти до примера. Помогите!

вход выглядит следующим образом:

Call Sign: <input type='text' value='' placeholder='Search' id='cs1' style='text-transform:uppercase' autofocus onkeyup='showHint(this.value)'>&nbsp;&nbsp;Name: <Input type='text' name='Fname'style='text-transform:capitalize'> 

для MySQL, как это:

<?php 
require_once "dbConnectDtls.php"; 
$q = $_REQUEST["q"]; 
$stmt = $db_found->prepare("SELECT DISTINCT callsign, Fname 
    FROM NetLog 
    WHERE recordID IN (SELECT max(recordID) 
    FROM NetLog 
    WHERE callsign LIKE ? GROUP BY callsign)"); 
$stmt->execute(array("$q%")); 
$result = $stmt->fetchAll(); 
print_r($result); 
?> 

Результат выполнения тестовой MySQL выше с q = 'w' возвращений:

Array ([0] => Array ([callsign] => W0DLK [0] => W0DLK [Fname] => Deb [1] 
=> Deb) [1] => Array ([callsign] => W0GPS [0] => W0GPS [Fname] => 
John [1] => John) [2] => Array ([callsign] => WA0TJT [0] => WA0TJT 
[Fname] => Keith [1] => Keith) [3] => Array ([callsign] => W0KCN [0] 
=> W0KCN [Fname] => Net Control [1] => Net Control)) 

И моя функция:

function showHint(str) { 
    if (str.length == 0) { 
     document.getElementById("txtHint").innerHTML = ""; 
     return; 
    } else { 
     var xmlhttp = new XMLHttpRequest(); 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       document.getElementById("txtHint").innerHTML = xmlhttp.responseText; 
      } 
     } 

     xmlhttp.open("GET", "gethint.php?q=" + str, true); 
     xmlhttp.send(); 
    } 
    } 

Answer 1

Функция вы пытаетесь осуществить это своего рода поиск/автозаполнения, что в простых терминах принимает результаты входной строки и возвращает связанные, отображаемые под окном, что пользователь печатает в.

Это выглядит например, то, что вы пытаетесь сделать, это иметь атрибут onkeyup, связанный с функцией PHP, которая отправляет строку поиска (которая является содержимым поля <input>, которое вы определили. Насколько я знаю, использование PHP таким образом не будет работать, поскольку код PHP в вашем атрибуте onkeyup будет выполняться только один раз, когда ваша страница будет загружена, а не после того, как пользователь начнет вводить текст.

Решение этой проблемы в терминах высокого уровня заключается в использовании JavaScript в качестве посредника между пользовательским вводом/HTML-интерфейсом и бэкэндом PHP/MySQL. JavaScript (и, в частности, библиотека jQuery) был создан, чтобы помочь вам в таких задачах. JavaScript выполняется в браузере клиента, а не на сервере, таком как PHP-код, поэтому, если у вас есть событие onkeyup с функцией JavaScript внутри него, вы увидите, что он выполнил даже после, страница загрузилась, пользователь вводит правильное поле ввода.

Итак, что вы хотите сделать что-то вроде этого:

1. Создать свое поле ввода с атрибутом onkeyup="someJavaScriptFunction()". Это сработает someJavaScriptFunction() каждый раз, когда кто-то набирает.
2. someJavaScriptFunction() будет определен где-то еще на вашей странице и обернут в теги <script>.
3. Ваша функция JavaScript сначала должна будет захватить содержимое поля <input>.
4. Далее необходимо использовать функцию AJAX библиотеки jQuery, чтобы отправить запрос POST на ваш код PHP.
5. Ваш PHP-код затем сделает некоторые работы за кулисами, поговорит с вашей базой данных MySQL, получит предлагаемые результаты, которые ему нужны, на основе входной строки и вернет их клиенту.
6. success компонент вашей функции AJAX будет получать эти результаты в виде какого-то строк данных, которые вам нужно будет разобрать, чтобы преобразовать в массив JavaScript или объект
7. Вам нужно будет использовать JQuery или некоторые больше JavaScript для отображения результатов под полем ввода и, возможно, еще нескольких HTML и другой функции JavaScript, чтобы сделать их доступными для кликов.

Я настоятельно рекомендую пройти через несколько руководств по JavaScript и jQuery, чтобы понять, как это работает. Есть несколько вещей, которые вам могут понадобиться для ознакомления, чтобы вы могли заполнить компоненты между HTML и PHP-кодом.