Живой поиск по двум полям одновременно с автоматическим выводом найденных значений

@STENLI48 · Регистрация: 12.03.2015

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

Добрый день
Нужна Ваша помощь в изменении кода своих сил не хватает что бы додумать все до логического завершения
есть код который при вводе значения автоматически выбирает из базы схожие значения и выводит их на экран
Появилась необходимость автоматического поиска не по одной колонке из БД а по двум, то есть вводя в первую колонку к примеру имя выводятся схожие по названию имена , далее нужно ввести во второе поле адрес что бы в итоге осталась только одна запись
Добавил новое поле ввода описал его в параметрах но вот загвоздка в JS возникла помогите исправить а точнее дописать скриптик

Вот собственно сам скрипт который и нужно подправить под поиск сразу по двум значениям
тут надо подставить searchDatas а вот куда ее и как ставить не могу понять

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    $(document).ready(function(){
        $('#results').html('<p style="padding:5px;">Введите название вашей улицу в значение для поиска.</p>');
  $('#searchData').keyup(function() {
  var searchVal = $(this).val();
  if(searchVal !== '') {
                 /* ниже вставил переменную searchDatas но какое значение ей присвоить не понятно, да и как то ее надо объявить и сделать что бы она проверяло второе поле на ввод информации */
  $.get('data/search-data.php?searchData='+searchVal+'&searchDatas='+searchVal, function(returnData)  {
  if (!returnData) {
                        $('#results').html('<p style="padding:5px;">К сожалению ничего не удалось найти.</p>');
                    } else {
                        $('#results').html(returnData);
                    }
                });
            } else {
                $('#results').html('<p style="padding:5px;">Введите название вашей улицу в значение для поиска.</p>');
            }
        });
    });

Остальные страницы тоже прилагаю

Собственно сама страница поиска

PHP
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
<?php
header("Content-Type: text/html; charset=windows-1251");
    /* Database setup information */
    $dbhost = 'localhost';  // Database Host
    $dbuser = 'root';       // Database Username
    $dbpass = '********';           // Database Password
    $dbname = '*******';     // Database Name
 
    $conn = mysql_connect($dbhost, $dbuser, $dbpass) or die(mysql_error());
    mysql_select_db($dbname);
    mysql_set_charset('cp1251');
 
    $param = $_GET["searchData"];
    $params = $_GET["searchDatas"];
 
    if ($conn) {
    
 $fetch = mysql_query("SELECT * FROM customers WHERE name REGEXP '$param' AND address REGEXP '$params' ORDER BY name LIMIT 10 ");
        while ( $row = mysql_fetch_object( $fetch ) ) {
            $sResults .= '<tr id="'. $row->id . '">';
            $sResults .= '<td>' . $row->name . '</td>';
            $sResults .= '<td>' . $row->address . '</td>';
            $sResults .= '<td>' . $row->phone . '</td>';
            $sResults .= '<td>' . $row->email . '</td></tr>';
        }
    }
    mysql_close($conn);
    echo $sResults;
?>

ну и сама страница index

PHP/HTML
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//RU"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<head>
 
    <title>Участки обслуживания ОАО "Газпром газораспределение Липецк"</title>
 
    <style type="text/css" title="currentStyle">
                @import "css/grid_sytles.css";
                @import "css/themes/smoothness/jquery-ui-1.8.4.custom.css";
    </style>
 
    <!-- jQuery libs -->
    <script  type="text/javascript" charset="windows-1251" src="js/jquery-1.6.1.min.js"></script>
    <script  type="text/javascript" charset="windows-1251" src="js/jquery-ui-1.7.custom.min.js"></script>
 
    <script  type="text/javascript" charset="windows-1251" src="js/jquery-search.js"></script>
 
</head>
<body>
 
<div id="container">
 
    <div id="dataTable">
 
        <div class="ui-grid ui-widget ui-widget-content ui-corner-all">
 
            <div class="ui-grid-header ui-widget-header ui-corner-top clearfix">
 
                <div class="header-left">
                    <!-- Left side of table header -->
                </div>
 
                <div class="header-right">
                    Улица: <input style="width:150px;" name="searchData" id="searchData" type="text">
                    Номер дома: <input style="width:150px;" name="searchDatas" id="searchDatas" type="text">
                </div>
                </div>
 
            <table class="ui-grid-content ui-widget-content cStoreDataTable" id="cStoreDataTable">
                <thead>
                    <tr>
                        <th class="ui-state-default">Название </th>
                        <th class="ui-state-default">Адрес</th>
                        <th class="ui-state-default">Телефон</th>
                        <th class="ui-state-default">Майл</th>
                    </tr>
                </thead>
                <tbody id="results"></tbody>
            </table>
            <div class="ui-grid-footer ui-widget-header ui-corner-bottom">
                <div class="grid-results">Если вы не нашли свой адрес то можете обратиться по телефону ------ </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

То есть изначально вбиваем поисковое слово в первое поле ввода автоматически появляется первые 10 результатов поиска далее вбив второе поле должен остаться наиболее подходящий результат как правило один
Вот так выглядит поиск по одному полю надо что бы и по второму искалось

Живой поиск по двум полям одновременно с автоматическим выводом найденных значений

@amadey18 · 12.03.2015, 09:14

2-ю переменную можно выбрать по селектору, вставить после 4 строки:

JavaScript
1
var searchDatas = $('#searchDatas').val();

учтите, что поиск будет производиться только при нажатии на клавиш на первом текстовом поле. Так что нужно будет нацепить еще один обработчик на 2-е текстовое поле.

@STENLI48 · 12.03.2015, 09:53 **[ТС]**

А подскажите как этот обработчик нацепить и на второе поле ввода ?

Добавлено через 14 минут
amadey18, Сделал как вы сказали добавил после 4 строки и в строке 7 подправил переменную

JavaScript
1
$.get('data/search-data.php?searchData='+searchVal+'&searchDatas='+searchVal, function(returnData)  {

теперь форма работает но на половину
приходится сначала вбивать второе значение а только после вбивать первое - но это немного не удобно
если вбивать первое значение а второе не трогать тогда вообще никакого результата не происходит пока не введешь второе значение и не поменяешь первое

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

@amadey18 · 12.03.2015, 10:04

STENLI48, ваш get запрос находится внутри события keyup

JavaScript
1
$('#searchData').keyup(function() { /*здесь ваш get */}

его необходимо оттуда вытащить.
и подключить обработчик клавиш на каждое текстовое поле:

JavaScript
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
    $(document).ready(function(){
        $('#results').html('<p style="padding:5px;">Введите название вашей улицу в значение для поиска.</p>');
  // обработчик на первое поле      
  $('#searchData').keyup(function() {
  var searchVal = $(this).val();
  var searchDatas = $('#searchDatas').val();
  });
// обработчик на второе поле
  $('#searchDatas').keyup(function() {
  var searchDatas = $(this).val();
  var searchVal = $('#searchData').val();  
  });
// здесь уже доделать необходимые проверки
  if(searchVal !== '') {
  $.get('data/search-data.php?searchData='+searchVal+'&searchDatas='+searchDatas, function(returnData)  {
  if (!returnData) {
                        $('#results').html('<p style="padding:5px;">К сожалению ничего не удалось найти.</p>');
                    } else {
                        $('#results').html(returnData);
                    }
                });
            } else {
                $('#results').html('<p style="padding:5px;">Введите название вашей улицу в значение для поиска.</p>');
            }
    });

@STENLI48 · 12.03.2015, 10:55 **[ТС]**

amadey18, Скопировал ваш скрипт и вставил но почему то формочка перестала вообще выдавать значения поиска ничего не происходит
Он даже не пытается искать как будто я ничего не ввожу

@amadey18 · 12.03.2015, 11:49

STENLI48, в консоли браузера проверьте на ошибки, возможно где-то неправильно стоят скобки.

@STENLI48 · 12.03.2015, 12:59 **[ТС]**

amadey18, вот мне что обработчик говорит

Uncaught ReferenceError: searchVal is not defined jquery-search.js:17
(anonymous function) jquery-search.js:17
f.extend._Deferred.e.resolveWith jquery-1.6.1.min.js:16
e.extend.ready jquery-1.6.1.min.js:16
c.addEventListener.z jquery-1.6.1.min.js:16

Добавлено через 32 минуты
amadey18, я так понимаю tyve не нравиться if и он пытается ее принять за функцию в которой неизвестная переменная searchVal, хотя значение этой переменной должно было быть присвоено уже выше

@amadey18 · 12.03.2015, 13:05

STENLI48, попробуйте так, походу он их не видит.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
 
  var searchVal = '';
  var searchDatas = '';
 // обработчик на первое поле      
  $('#searchData').keyup(function() {
  searchVal = $(this).val();
  searchDatas = $('#searchDatas').val();
  });
// обработчик на второе поле
  $('#searchDatas').keyup(function() {
  searchDatas = $(this).val();
  searchVal = $('#searchData').val();  
  });

@STENLI48 · 12.03.2015, 15:31 **[ТС]**

amadey18, не работает но ошибка появляться не стала

попробовал сделать так
если я после первого обработчика убираю }); и переношу в самый низ начинает работать первое окно для ввода
если я после второго обработчика убираю }); и переношу в самый низ начинает работать второе окно для ввода
если я после обоих обработчиков убираю }); и переношу их в самый низ начинает работать только второе окно для ввода

получается что обработчики не должны закрывать пока не отработает if ??? и если внутри одного обработчика создается второй то один перестает работать

Добавлено через 2 часа 18 минут
amadey18, Help me !!!
Очень нужна помощь

@amadey18 · 12.03.2015, 16:45

STENLI48, http://jsfiddle.net/amadey18/yj9f6t1q/1/
Вставьте выполнение в отдельную функцию, и вызывайте ее с разных полей.

HTML5
1
2
3
4
<div class="header-right">
    Улица: <input style="width:150px;" name="searchData" id="searchData" type="text"/>
    Номер дома: <input style="width:150px;" name="searchDatas" id="searchDatas" type="text"/>
                </div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    $(document).ready(function(){
        $('#results').html('<p style="padding:5px;">Введите название вашей улицу в значение для поиска.</p>');
        $('#searchData').keyup(function() {
send_datas();
  });
// обработчик на второе поле
  $('#searchDatas').keyup(function() {
send_datas();
  });
    });
function send_datas(){
            console.log(1);
var searchVal = $('#searchData').val();
var searchDatas = $('#searchDatas').val();       
// здесь уже доделать необходимые проверки
  if(searchVal !== '') {
    console.log("отправляем");
            } else {
console.log("не отправляем");
            }
        };

@STENLI48 · 12.03.2015, 20:23 **[ТС]**

amadey18, что то я в последнем коде весь позапутался

Добавлено через 1 час 32 минуты
amadey18, Спасибо громадное все отлично заработало работать !!!
разобрался с кавычками !!!
Последний скрипт работает, результат тот что и требовался

а можно дополнительный вопросик по строковым полям я теперь понял как что делать
а что делать при селекте или там все аналогично ? это я на будущее спрашиваю

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

HTML5
1
2
3
4
5
<select id="models" name="models">
    <option value="val1">первый</option>
    <option value="val2">второй</option>
    <option value="val3">третий</option>
</select>

Добавлено через 41 минуту
amadey18, Все теперь окончательно разобрался и прилепил еще и выборку селекта !
теперь можно отдельно выбрать населенный пункт ну а дальше уже вводить улицу и номера домов !

Спасибо большое за помощь !!!
Вы очень сильно помогли мне !

@amadey18 · 13.03.2015, 09:06

STENLI48, Вчера вечером не смог ответить, но рад что вы сами разобрались.

Если что вот работа с селектами

@STENLI48 · 13.03.2015, 10:21 **[ТС]**

amadey18, Спасибо Вам большое Вы настоящий гуру своего дела !

Новые блоги и статьи Все статьи Все блоги /
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 секунды (а то и больше),. . .

Живой поиск по двум полям одновременно с автоматическим выводом найденных значений

Решение

Решение

Решение

@STENLI48 0 / 0 / 0 Регистрация: 12.03.2015 Сообщений: 7
	12.03.2015, 10:55 [ТС]
	amadey18, Скопировал ваш скрипт и вставил но почему то формочка перестала вообще выдавать значения поиска ничего не происходит Он даже не пытается искать как будто я ничего не ввожу 0

@amadey18 92 / 92 / 51 Регистрация: 29.04.2013 Сообщений: 361
	12.03.2015, 11:49
	STENLI48, в консоли браузера проверьте на ошибки, возможно где-то неправильно стоят скобки. 0

@STENLI48 0 / 0 / 0 Регистрация: 12.03.2015 Сообщений: 7
	12.03.2015, 15:31 [ТС]
	amadey18, не работает но ошибка появляться не стала попробовал сделать так если я после первого обработчика убираю }); и переношу в самый низ начинает работать первое окно для ввода если я после второго обработчика убираю }); и переношу в самый низ начинает работать второе окно для ввода если я после обоих обработчиков убираю }); и переношу их в самый низ начинает работать только второе окно для ввода получается что обработчики не должны закрывать пока не отработает if ??? и если внутри одного обработчика создается второй то один перестает работать Добавлено через 2 часа 18 минут amadey18, Help me !!! Очень нужна помощь 0

@amadey18 92 / 92 / 51 Регистрация: 29.04.2013 Сообщений: 361
	13.03.2015, 09:06
	STENLI48, Вчера вечером не смог ответить, но рад что вы сами разобрались. Если что вот работа с селектами 0

@STENLI48 0 / 0 / 0 Регистрация: 12.03.2015 Сообщений: 7
	13.03.2015, 10:21 [ТС]
	amadey18, Спасибо Вам большое Вы настоящий гуру своего дела ! 0