Автозаполнение HTML-формы из JSON

#javascript #php #jquery #json #autocomplete

#javascript #php #jquery #json #автозаполнение

Вопрос:

Хорошо, итак, у меня есть эта форма :

Форма

Когда имя вводится в первом вводе, мне нужно заполнить «ID» и «Email» данными из таблицы SQL. Ввод имени выполняется автоматически с помощью JSON, вот пример JSON:

 [{
"label": "Andre Nadeau",
"Num": "104J",
"email": "Andre.Nadeau@example.com"
}, {
"label": "Andre Potvin",
"Num": "130J",
"email": "Andre.Potvin@example.com"
}],
  

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

PHP :

 $query = $db->query("SELECT * FROM info_employer WHERE Prenom LIKE '%".$searchTerm."%' ORDER BY Prenom ASC");
while ($row = $query->fetch_assoc()) {
    $data[] = array(
        'label' => $row['Prenom'] . ' ' . $row['Nom'],
        'Num' => $row['Num'],
        'email' => $row['Email']
    );}
  

HTML:

 <script>
        $(function() {
            $( "#Nom" ).autocomplete({
                source: 'Search.php',
            })
        })
</script>


<div class="form-group">
    <label for="Name">Nom: </label>
       <input type="text" id="Nom" class="form-control" name="Nom" required>
    <label for="Num">ID: </label>
       <input type="text" id="Num" class="form-control" name="Num">
    <label for="Email">Email: </label>
       <input type="text" id="Email" class="form-control" name="Email">
  

Редактировать:

Я пытаюсь работать с ответом Feeda, все имеет большой смысл, но у меня возникают трудности с тем, чтобы заставить его работать.

Я изменил свой PHP на :

     $searchTerm = $_GET['term'];

//get matched data from table
$query = $db->query("SELECT * FROM info_employer WHERE Prenom LIKE '%".$searchTerm."%' ORDER BY Prenom ASC");
while ($row = $query->fetch_assoc()) {
    switch($option)   {
        case 'nom':
            $data[] = $row['Prenom'] . ' ' . $row['Nom'];
        case 'email':
            $data[] = $row['Email'];
    }
  

И Javascript для :

         <script>
        $(function() {
            $( "#Nom" ).autocomplete({ source: 'Search.php?option=name', }) 
            $( "#email" ).autocomplete({ source: 'Search.php?option=email', })  
        })
    </script>
  

Если я правильно понимаю, я должен иметь возможность использовать /Search.php?option=nom и увидеть некоторые данные, но когда я пытаюсь в браузере, у меня появляется пустая страница с «null».

И, конечно, мое автозаполнение пока не работает:(

Обновить

На данный момент я не уверен, что было бы лучше, если бы я создал новый вопрос, но я почти на месте!

I’m able to get the data I need with all the help I got here( Thanks everyone <3)

My problem now is that I can find a user using the «Name» field in my form, but once I selected the user I need the email field to be completed automatically using the email linked to the user in my database…

So here is where I’m at for the code :

HTML

$(function() {
$( «#Nom» ).autocomplete({ source: ‘Search.php?option=nom’, })
$( «#email» ).autocomplete({ source: ‘Search.php?option=email’, })
})

PHP

    //get search term
$option = $_GET['option'];
$searchTerm = $_GET['term'];

//get matched data from table
$query = $db->query("SELECT * FROM info_employer WHERE Prenom LIKE '%".$searchTerm."%' ORDER BY Prenom ASC");
while ($row = $query->fetch_assoc()) {
    switch($option)   {
        case 'nom':
            $data[] = $row['Prenom'] . ' ' . $row['Nom'];
        case 'email':
            $data[] = $row['Email'];
    }
}

//return json data
echo json_encode($data);
  

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

ДОПОЛНИТЕЛЬНЫЕ ОБНОВЛЕНИЯ

Следуя совету gschambial :

HTML

 <script>
$(function(){
$('#Nom').autocomplete({
              minLength: 0,
              source: function (request, response) {
                  $.ajax({
                      type: "GET",
                      url: 'Search.php',
                      dataType: "json",
                      data: {term : request.term},
                      dataType: "json",
                      success: function (data) {
                          $.each(data,function(key, item){
                             return {
                               label : item.NumColumnName,
                               value : item.EmailColumnName
                             };
                          });
                      },
                      error: function (result) {
                          alert("Error");
                      }
                  });
              },
              select: function (event, ui) {
                          var Num = $("#Num");
                          var Email = $("#Email");
                          Num.val(ui.item.label);
                          Email.val(ui.item.value);
              }
          });     
  });        
  

PHP

     $searchTerm = $_GET['term'];

//get matched data from table
$query = $db->query("SELECT * FROM info_employer WHERE Prenom LIKE '%".$searchTerm."%' ORDER BY Prenom ASC");
while ($row = $query->fetch_assoc()) {
    switch($option)   {
        case 'nom':
            $data[] = $row['Prenom'] . ' ' . $row['Nom'];
        case 'email':
            $data[] = $row['Email'];
    }
}

//return json data
echo json_encode($data);
  

По-прежнему безуспешно!

Комментарии:

1. можете ли вы $(function() { $.ajax({ method: 'POST', url: 'Search.php' success: function(response) { console.log(response); }); }); выполнить этот код и сказать мне, что возвращается из вашего php-файла?

2. Я попробовал код, и он вернул неперехваченный SyntaxError: неожиданный идентификатор в консоли, не уверен, что я чего-то не хватает

Ответ №1:

Автозаполнение принимает массив, поэтому создает из них отдельные массивы и получает их через ajax. и затем назначьте источник соответственно для каждого.

 while ($row = $query->fetch_assoc()) {
    $data['names'][] = $row['Prenom'] . ' ' . $row['Nom'];
    $data['ids'][] = $row['Num'];
    $data['emails'][] = $row['email'];
  

}

в JavaScript:

 source : data.names;
  

ещё:

вместо исходного кода: Search.php попробуйте. Поиск.php?опция=имя

На PHP.

 switch($option)   {
 case 'name':
  $data[] = $row['Prenom'] . ' ' . $row['Nom'];
 case 'email':
    $data[] = $row['email'];
..
}
  

Комментарии:

1. Решение имеет большой смысл, но я, честно говоря, понятия не имею, как работать с ajax. Я понимаю часть PHP, но мне потребуется немного больше помощи для JavaScript.

2. Хорошо, я понимаю переключатель, но как это приведет к автозаполнению поля «Электронная почта», когда я ввожу имя в поле name ?

3. $( «#Nom» ).автозаполнение ({ источник: ‘Search.php?option=name’, }) $(«#email» ).автозаполнение ({ источник: ‘Search.php?option=email’, })

4. Я действительно ценю время, которое вы уделяете, чтобы помочь мне,

5. Я отредактировал вопрос с внесенным изменением, если у вас есть время взглянуть 🙂

Ответ №2:

Я думаю, вам нужно что-то вроде этого:

 $(function(){
$('#Nom').autocomplete({
              minLength: 0,
              source: function (request, response) {
                  $.ajax({
                      type: "POST",
                      url: 'Search.php',
                      dataType: "json",
                      data: {term : request.term},

                      success: function (data) {
                          $.each(data,function(key, item){
                             return {
                               label : item.nom,
                               value : item.email
                             };
                          });
                      },
                      error: function (result) {
                          alert("Error");
                      }
                  });
              },
              select: function (event, ui) {
                          var Num = $("#Num");
                          var Email = $("#Email");
                          Num.val(ui.item.label);
                          Email.val(ui.item.value);
              }
          });     
  });        
  

PHP-КОД:

 $post_data= json_decode(file_get_contents('php://input'), true); 
print_r($post_data); 
$searchTerm = $post_data["term"];
    $data= array();

    //get matched data from table
    $query = $db->query("SELECT * FROM info_employer WHERE Prenom LIKE '%".$searchTerm."%' ORDER BY Prenom ASC");
    while ($row = $query->fetch_assoc()) {

                $data["nom"] = $row['Prenom'] . ' ' . $row['Nom'];
                $data["email"] = $row['Email'];

    }
    //return json data
    echo json_encode($data);
  

Попробуйте это! Я надеюсь, это решит вашу задачу.

Комментарии:

1. Спасибо за ввод, если я использую точную копию функции, которую вы мне дали, я получаю некоторую ошибку в моем error.log : PHP Notice: Неопределенный индекс: опция в /var/www/html/Search.php в строке 12 ссылка: absence.com Уведомление PHP: Неопределенный индекс: термин в /var/www/html/Search.php в строке 13 ссылка: absence.com Примечание PHP: Неопределенная переменная: данные в /var/www/html/Search.php в строке 31 ссылка: absence.com

2. @ayyyymtl Эта ошибка возникает, когда у вас есть некоторые неинициализированные переменные.

3. Изменено searchTerm на term . Проверьте мой обновленный ответ.

4. @ayyyymtl также удалите $option = $_GET['option']; из вашего Search.php файла.

5. @ayyyymtl Не волнуйтесь, автозаполнение работает, отлично. Теперь мы перейдем к следующей части.