Обновление нескольких полей с помощью автозаполнения JQueryUI - PullRequest
Новая
       31

Обновление нескольких полей с помощью автозаполнения JQueryUI

1 голос
/ 12 марта 2020

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

Используемая технология:

Я использую JQueryUI для создания функции автозаполнения. Он работает с базовым набором данных c, но я пытаюсь создать исходные данные в виде массива JSON объектов локально на странице, используя MySQL Query в PHP.

Что Я делаю:

В моем коде у меня есть четыре поля, и я делаю автозаполнение на поле #first. Я хотел бы, чтобы при выборе элемента в списке автозаполнения он заполнял все четыре поля данными из источника. Сейчас в автозаполнении ничего не заполняется, так как я считаю, что мой JSON массив объектов неправильно отформатирован, и вызов автозаполнения не может прочитать набор данных.

Мне нужно знать:

  • У меня есть данные в объекте для каждого поля, которое должно быть заполнено. Правильно ли я создаю массив объектов с несколькими элементами в каждом объекте?
  • Что JQuery Мне нужно написать, чтобы обновить четыре поля при выборе элемента в автозаполнении
  • Как мне сделать автозаполнение работает из любого из четырех полей и все еще позволяет обновлять все четыре поля после выбора и использовать один и тот же набор данных?

Мой код: 

<input type="text" id="first" name="first">

<input type="text" id="last" name="last">

<input type="text" id="email" name="email">

<input type="text" id="phone" name="phone">

$( "#first" ).autocomplete({

<?php

    echo 'source: [';

    $nr = 1;
    while ($row = mysqli_fetch_array($results, MYSQLI_ASSOC)) { 

        if ($nr == $nrows)  echo '[ {label: "first", value: "'. $row['first'] .'"}, { label: "last", value: "'. $row['last'] .'"}, {label: "email", value: "'. $row['email'] .'"}, { label: "phone", value: "'. $row['phone'] .'"} ]';
        else                echo '[ {label: "first", value: "'. $row['first'] .'"}, { label: "last", value: "'. $row['last'] .'"}, {label: "email", value: "'. $row['email'] .'"}, { label: "phone", value: "'. $row['phone'] .'"} ],';     

        $nr++;
    }                                                                                               
    echo ']';

    ? >

});

1 Ответ

0 голосов
/ 13 марта 2020

Вы захотите обновить формат данных, чтобы он возвращал массив объектов данных, которые может использовать автозаполнение. 

[{
  label,
  value
}]

Это базовая структура c, но вы можете добавить свою собственную элементов к этому. 

[{
  label,
  value,
  first
  last
  email
  phone
}]

Порядок не слишком важен. Я бы посоветовал установить автономный PHP скрипт, который Autocomplete может вызвать для получения данных. Это обсуждается здесь: https://api.jqueryui.com/autocomplete/#option -источник

Вот пример с данными: 

$(function() {
  $("#first").autocomplete({
    source: [{
      label: "Homer Simpson",
      value: "Homer",
      first: "Homer",
      last: "Simpson",
      phone: "(417) 555-1212",
      email: "chunkylover53@aol.com"
    }, {
      label: "Marge Simpson",
      value: "Marge",
      first: "Marge",
      last: "Simpson",
      phone: "(417) 555-1212",
      email: ""
    }, {
      label: "Bart Simpson",
      value: "Bart",
      first: "Bart",
      last: "Simpson",
      phone: "(417) 555-1212",
      email: "c"
    }],
    select: function(e, ui) {
      $("#first").val(ui.item.first);
      $("#last").val(ui.item.last);
      $("#phone").val(ui.item.phone);
      $("#email").val(ui.item.email);
      return false;
    }
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="first" name="first">
<input type="text" id="last" name="last">
<input type="text" id="email" name="email">
<input type="text" id="phone" name="phone">

В PHP Вы можете создать автономный скрипт: 

<?php
/* -- Connect to SQL -- */
/* -- Perform Query based on $_GET['term'] -- */
$nr = 1;
$results = array();
while ($row = mysqli_fetch_array($results, MYSQLI_ASSOC)) { 
  array_push(array(
    "label" => $row['first'] . " " . $row["last"],
    "value" => $row['first'],
    "first" => $row['first'],
    "last" => $row['last'],
    "phone" => $row['phone'],
    "email" => $row['email'],
  ));
}

/*-- Close SQL Connection --*/
header('Content-Type: application/json');
echo json_encode($results);
?>

Затем можно установить для автозаполнения source значение URL этого скрипта.

...