Дальнейшая обработка результатов живого поиск ajax

@Mothur · Регистрация: 29.05.2014

Студворк — интернет-сервис помощи студентам

Вопрос состоит не в том, как реализовать простой запрос ajax, а как при выборе одного из результатов поиска заполнить нужные поля в форме.

В чём суть моей задачи вообще. На форме регистрации пациента в есть две группы input:
1) Один input text для строчки живого поиска.
2) Несколько input text и select, которые заполняются информацией о пациенте: ФИО, пол и т.п.
И кнопка отправки формы (Фио, пол и т.п.).

В строчку поиска вбивается фамилия и выводятся ниже все пациенты с этой фамилией + ещё какой-либо идентификатор. И вот тут хочу реализовать следующее: при выбора одного результатов поиска все поля ниже (ФИО, пол и т.п.) заполняются информацией из базы по этому пациенту.

index.php

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Живой поиск</title>
    <!-- Подключаем jquery и скрипт с кодом живого поиска ajax -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/search_clients.js"></script>
  </head>
  <body>
  <!-- Форма живого поиска -->
    <form action="search_clients.php" method="post" name="form" onsubmit="return false;">
      <p>
        <input name="search_clients" type="text" id="search_clients" autocomplete="off">
      </p>
    </form>
  <!-- div для вывода результатов поиска -->
  <div id="clients_search_result">Начните вводить запрос</div>
    <br>
  <!--  Форма регистрации (ФИО, пол и т.п. И кнопка отправки) -->
    <form name="registration_form" id="registration_form" action="" method="post" accept-charset="utf-8">
      <input type="text" name="last_name" id="last_name" placeholder="Фамилия">
      <input type="text" name="first_name" id="first_name" placeholder="Имя">
      <input type="text" name="middle_name" id="middle_name" value="" placeholder="Отчество">
      <select name="gender" id="gender">
        <option value="1">Женский пол</option>
        <option value="0">Мужской пол</option>
      </select>
      <input type="submit" name="add_new_client" id="add_new_client" value="Добавить нового клиета">
    </form>
  </body>
</html>

search_clients.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function(){
  $("#search_clients").keyup(function(){
     var search = $("#search_clients").val();
     $.ajax({
       type: "POST",
       url: "search_clients.php",
       data: {"search_clients": search},
       cache: false,                                 
       success: function(response){
          $("#clients_search_result").html(response);
       }
     });
     return false;
   });
});

search_clients.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
    $search = $_POST['search_clients']; //запосим в переменную переменную из глобального массива POST. Проверки на лишние символы и т.п. пока что не делаю. Потом добавлю.
    if($search == ''){ //Если в переменной ничего нет, то возвращаем в #clients_search_result текст:
        exit("Начните вводить запросв");
    };
    require_once 'system/dbconnection.php'; //подключаемся к базе
    mysqli_set_charset($connection, "utf8"); //принудительно назначаем кодировку
    $query = "SELECT * FROM clients WHERE surname LIKE '%$search%'";//текст запроса
    $result = $connection->query($query); //выполняем запрос и заносим в переменную результат запроса
    if (!$result) die($connection->error) & mysqli_close() & exit(); //если ошибка, то выводим текст ошибки, закрываем соединение с базой и завершаем выполнение
    mysqli_close($connection);//закрываем соединение с базой      
    if(mysqli_num_rows($result) > 0){//если запросом получено больше 0 результатов, то...
       $myrow = $result->fetch_array(MYSQLI_ASSOC); //...извлекаем результаты
       do{ // и выполняем перебор
         echo "<div>".$myrow['surname']."</div>"; // вывзвращая фамилию в #clients_search_result
       }while($myrow = mysqli_fetch_array($result)); //пока есть результаты
    }else{//иначе повзращаем в #clients_search_result сообщение:
       echo "Нет результатов";
    }
?>

dbconnection.php

PHP
1
2
3
4
5
6
7
8
<?php 
    $db_hostname = 'localhost';
    $db_database = 'lg4';
    $db_username = 'root';
    $db_password = '';
    $connection = $connection = new mysqli($db_hostname, $db_username, $db_password, $db_database);
    if ($connection->connect_error) die($connection->connect_error);
?>

таблица базы данных clients.sql

SQL
1
2
3
SET NAMES 'utf8';
INSERT INTO clients(id_clients, surname, name, middle_name, gender, birth_year) VALUES
(1, 'Седляр', 'Ольга', 'Викторовна', 1, 1993);

Архив со всеми этими файлами - test.zip

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

@Jodah · 19.12.2015, 17:05

Сообщение от Mothur

как при выборе одного из результатов поиска заполнить нужные поля в форме

Вы отправляете AJAX'ом запрос на сервер. Сервер возвращает данные. Вы их с помощью JS помещаете в нужные input'ы.

Поищите примеры AJAX в интернете/на форуме.

@Mothur · 19.12.2015, 17:55 **[ТС]**

Сообщение от Jodah

Вы отправляете AJAX'ом запрос на сервер.

Так а как мне их отправить? В смысле, что отправлять?
Точнее я поиском возвращаю обычные div, которые внутри содержат фамилию.
Мне нужно радиокнопки возвращать или что?

@Jodah · 19.12.2015, 18:02

Mothur, на сервер отправляете фамилию. На сервере возвращаете массив из данных, которые нужно вставить в input'ы.

@Mothur · 19.12.2015, 18:50 **[ТС]**

Jodah,
Так. кажется понимаю.
Но это не правильно. Потому что может быть несколько человек с такой же фамилией. Самое лучшее - это отправлять уникальный идентификатор (ключевое поле). Это исключит ошибку. НО как реализовать именно это.

При поиске я планировал получать в качестве результата не только фамилию, но и номер телефона или паспорта. Чтобы визуально выбрать правильного человека. Получается, следует получать ещё и идентификатор.
Так и как это хранить? Почему я спросил про радиокнопки и т.п. - там можно в радиокнопке в значение value запихнуть идентификатор. Но это же явно какой-то "костыль". Как лучше сделать?

@Jodah · 19.12.2015, 20:18

Mothur, вариантов много, и это относится скорее к JS, чем PHP.

Как вариант, при вводе любого символа в текстовое поле отправляете ajax-запрос, который отправляет введённую строку. Сервер возвращает массив из всех юзеров, у которых фамилия начинается на введённую юзером строку. Также можно сразу выводить ИНН или другую информацию. Ну т.е. делаете как в гугле - при вводе каждого символа возвращается список вариантов.

Например, ввели "Васи", сервер возвращает массив:

PHP
1
2
3
$data = array(); // Массив, который отправляем юзеру в ответ на ajax-запрос
$data[15] = array('name' => 'Васильев Пётр Владимирович', 'inn' => 1234567); // Юзер 15 и его данные
$data[38] = array('name' => 'Васильева Дарья Петровна', 'inn' => 1234567); // Юзер 38 и его данные

Это список вариантов для выбора. Далее создаём какой-нибудь <div id="results"></div>, куда закидываем все найденные варианты. Опустим CSS, можно html оформить как-нибудь так:

HTML5
1
2
3
4
<div id="results">
    <div onclick="select_user('15')">Васильев Пётр Владимирович</div>
    <div onclick="select_user('38')">Васильева Дарья Петровна</div>
</div>

Ну а при клике по одному из дивов запускается JS-функция select_user, которая отправляет на сервер идентификатор выбранного пользователя. Сервер возвращает все данные по идентификатору, и вы подставляете их в нужные инпуты.

@Mothur · 20.12.2015, 14:07 **[ТС]**

Jodah,
Мне кажется, что это лишняя нагрузка на MySQL. Слишком много пересылать информации будет, когда ещё точно не принято решение о том, что именно нужно загружать... точнее для какого человека.

Я сделал пока что с помощью радиокнопок.
В коде выше изменил echo

PHP
1
echo "<div><input type='radio' name='clients' value='".$myrow['id_clients']."' id='".$myrow['id_clients']."'><label for='".$myrow['id_clients']."'>".$myrow['surname']." (".$myrow['birth_year']." г.р.)</label></div><br>";

Теперь на выходе получаю радиокнопку со значением value идентификатор клиента.

Теперь нужно сделать, чтобы при клике запускался ещё один ajax.
Ну. Поле вывода результатоа ограничил по высоте и полосу прокрутки задал. Правда кнопки висят. Нужно будет потом скрыть их, чтобы не было видно.

Добавлено через 17 часов 24 минуты
Jodah,

Что-то у меня не выходит.

Сначала создал пустой проект. Добавил несколько div внутри div, добавил зазоры с помощью css и рамку, чтобы границы видеть. И потренировался при щелчке выводить alert. Всё получалось.
После этого внутри div добавил несколько несколько радиокнопок, обёрнутых в div

HTML5
1
2
3
4
5
<div id="test">
  <div><input type="radio" name="client" value="9" id="gf"><label for="gf">Лэюл вап в ввт лвоопвао рв</label></div>
  <div><input type="radio" name="client" value="5" id="gfа"><label for="gfа">Лэюл вап в ввт лвоопвао рв</label></div>
  <div><input type="radio" name="client" value="8" id="gfаа"><label for="gfаа">Лэюл вап в ввт лвоопвао рв</label></div>
 </div>

И попробовал вывести сначала просто alert, а после value каждой радиокнопки (используя jQuery)

JavaScript
1
2
3
jQuery('#clients_search_result div input').click(function() {
  alert(jQuery($(this)).val());
});

Всё работало. Затем я попытался проделать всё это с радиокнопками, которые получаю при выдаче живого поиска.
Не сработало. Вероятно от того, что этих радиокнопок до определённого момента не существует. Тогда я повесил на кажду радиокнопку вызов функции

PHP
1
echo "<div><input type='radio' name='clients' value='".$myrow['id_clients']."' id='".$myrow['id_clients']."'onclick='alertmy()'><label for='".$myrow['id_clients']."'>".$myrow['surname']." (".$myrow['birth_year']." г.р.)</label></div>";

И попробовал написать саму функцию. Единственное, что хоть как-то работало, приведено ниже. Но оно работало как снежный ком - при первом клике по радиокнопке ничего не выводило. При повторном клике по той же или любой другой - value первой кликнутой радиокнопки и новой. И там по нарастающей.

JavaScript
1
2
3
4
5
function alertmy() {
  jQuery('#clients_search_result div input').click(function() {
    alert(jQuery($(this)).val());
  });
}

В чём дело и как быть? Подскажите, пожалуйста.

@Jodah · 20.12.2015, 18:37

Mothur, я не особо дружу с JS, лучше этот вопрос уточнить на форуме по JavaScript.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .

@Jodah 3899 / 3237 / 1353 Регистрация: 01.08.2012 Сообщений: 10,909
	19.12.2015, 18:02
	Mothur, на сервер отправляете фамилию. На сервере возвращаете массив из данных, которые нужно вставить в input'ы. 1

@Mothur 33 / 4 / 1 Регистрация: 29.05.2014 Сообщений: 144
	19.12.2015, 18:50 [ТС]
	Jodah, Так. кажется понимаю. Но это не правильно. Потому что может быть несколько человек с такой же фамилией. Самое лучшее - это отправлять уникальный идентификатор (ключевое поле). Это исключит ошибку. НО как реализовать именно это. При поиске я планировал получать в качестве результата не только фамилию, но и номер телефона или паспорта. Чтобы визуально выбрать правильного человека. Получается, следует получать ещё и идентификатор. Так и как это хранить? Почему я спросил про радиокнопки и т.п. - там можно в радиокнопке в значение value запихнуть идентификатор. Но это же явно какой-то "костыль". Как лучше сделать? 0

@Jodah 3899 / 3237 / 1353 Регистрация: 01.08.2012 Сообщений: 10,909
	20.12.2015, 18:37
	Mothur, я не особо дружу с JS, лучше этот вопрос уточнить на форуме по JavaScript. 1