Дальнейшая обработка результатов живого поиск 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.

Новые блоги и статьи Все статьи Все блоги /
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .

@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