Autocomplete: заполнение input-а на основании данных, выбранных из второго инпута

@dadx · Регистрация: 12.07.2015

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

Доброго времени суток. Третий день сижу курю много форумов и мануалов так как в скриптах слаб, видел много кусочков решений похожих вопросов но вот так чтобы прям мое не нашел) спрошу у вас друзья....

Есть допустим itput # 1 в который "живим" поисков выбирается с БД (sql) название товара...

Есть второй itput # 2 в который должна прилететь цена этого товара что мы выбрали с инпута 1...

В первый я выбираю Autocomplet-ом взятым по примеру, все работает отлично. Ниже даю код всего.

Шапка с подключениями и скриптом

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript" src="./jquery.js"></script>
<script [PHP][/PHP]type="text/javascript" src="./jquery.limit.js"></script>
<script src="./calendar_ru.js" type="text/javascript"></script>
<script src="./translitnew.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./ui/jquery.autocomplete.css" />
<script type="text/javascript" src="./ui/jquery.js"></script>
<script type="text/javascript" src="./ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="./ui/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
 $("#tag").autocomplete("./ui/autocomplete.php", {
    selectFirst: true,
    delay: 100,
    minChars: 0,
    max: 50,
    autoFill: true,
    mustMatch: true,
    matchContains: false,
    scrollHeight: 300
    });
});
</script>

Сам файл "autocomplete.php"

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
<?php
    #Подключаемся к базе
    $q=$_GET['q'];
    $q = iconv('UTF-8', 'windows-1251', $q);
    $my_data=mysql_real_escape_string($q);
    $connect=mysqli_connect('host','user','pass','db') or die("Database Error");
    $connect->set_charset("utf8");
    $connect->query("SET NAMES 'UTF8'");
    $connect->query("SET character_set_client='utf8'");
    $connect->query("SET character_set_connection='utf8'");
    $connect->query("SET character_set_results='utf8'");
    $connect->query("SET character_set_server='utf8'");
    $connect->query("SET collation_connection='utf8_unicode_ci'");
    $connect->query("SET collation_server='utf8_unicode_ci'");
    $connect->query("SET collation_database='utf8_unicode_ci'");
    $sql="SELECT name FROM sklad WHERE name LIKE '%$my_data%'";
    $result = mysqli_query($connect,$sql) or die(mysqli_error());
    if($result)
    {
        while($row=mysqli_fetch_array($result))
        {
            echo $row['name']."\r\n";
 
        }
    }
?>

И кусочек двух инпутов...

HTML5
1
2
<td align='center'><input name='chek_name'  required placeholder='Например: Coca Cola' type='text' id='tag'></td>
<td align='center'><input name='chek_money' required placeholder='Например: 17.50' type='text' id='tags'></td>

Суть чтобы в id='tags'после выбора мной в первом input, появилась цена выбранная с базы по этому товару.... Спасайте!)

@sharpay · 13.07.2015, 00:27

вот сюда добавь close :

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
26
27
28
29
30
$(document).ready(function(){
 $("#tag").autocomplete("./ui/autocomplete.php", {
    selectFirst: true,
    delay: 100,
    minChars: 0,
    max: 50,
    autoFill: true,
    mustMatch: true,
    matchContains: false,
    scrollHeight: 300,
   close: function( event, ui ) {
 
  var name =  $('#tag').val();
 
  // здесь ajax запрос в серверу,  сервер возвращает тебе цену и ты вставляешь ее в нужный инпут , типа :
 
$.ajax({
   url: "getprice.php",
  data: { search_name: name   }
})
  .done(function( str) {
    $('#tags').val(str);
  });
 
 
  }
 
 
    });
});

Добавлено через 1 минуту
далее на сервере создаешь getprice.php , который получает название, делает запрос к БД и возвращает тебе цену.

PHP
1
echo $price;

finish

это принцип.

@dadx · 13.07.2015, 09:36 **[ТС]**

Счас попробую, отпишусь)

Добавлено через 11 минут

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function(){
 $("#tag").autocomplete("./ui/autocomplete.php", {
    selectFirst: true,
    delay: 100,
    minChars: 0,
    max: 50,
    autoFill: true,
    mustMatch: true,
    matchContains: false,
    scrollHeight: 300,
    close: function( event, ui ) {
    var name =  $('#tag').val();
    $.ajax({
       url: "./ui/getprice.php",
      data: {search_name: name}
    })
      .done(function(str) {
        $('#tags').val(str);
            });
        }
    });
});

getprice.php

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
<?php
    #Подключаемся к базе
    $q=$_GET['q'];
    $q = iconv('UTF-8', 'windows-1251', $q);
    $my_data=mysql_real_escape_string($q);
    $connect=mysqli_connect('base','user','pass','db') or die("Database Error");
    $connect->set_charset("utf8");
    $connect->query("SET NAMES 'UTF8'");
    $connect->query("SET character_set_client='utf8'");
    $connect->query("SET character_set_connection='utf8'");
    $connect->query("SET character_set_results='utf8'");
    $connect->query("SET character_set_server='utf8'");
    $connect->query("SET collation_connection='utf8_unicode_ci'");
    $connect->query("SET collation_server='utf8_unicode_ci'");
    $connect->query("SET collation_database='utf8_unicode_ci'");
    $sql="SELECT price FROM sklad WHERE name LIKE '%$my_data%'";
    $result = mysqli_query($connect,$sql) or die(mysqli_error());
    if($result)
    {
        while($row=mysqli_fetch_array($result))
        {
            echo $row['price']."\r\n";
 
        }
    }
?>

HTML5
1
2
<td align='center'><input name='chek_name'  required placeholder='Например: Coca Cola' type='text' id='tag'></td>
<td align='center'><input name='chek_money' required placeholder='Например: 17.50' type='text' id='tags'></td>

Не работает....((( В первое ввожу, выпадает список, выбираю, во втором ничего не происходит...( Что делаю не так?

Добавлено через 10 минут
Может я не правильно принимаю данные с первой формы в getprice.php? Что нужно указать в

PHP
1
$q=$_GET['q'];

????

Или в инпут нужен какой то onSelect....

Добавлено через 7 минут
Попробывал вписать в

PHP
1
$q=$_GET['q'];

существующий нейм с базы типа

PHP
1
$q="Кока кола"

но даже так он ничего мне не выдал....

Добавлено через 29 минут
И вообще по логике, откуда скрипт знает что я выбрал со списка? Думаю что должен быть какой то onSelect или что то вроде, который после выбора мной со списка уже отправит запрос на сервер, который в свою очередь вернет то что нужно... Вообщем мозг кипит) выручайте, плз!

@sharpay · 13.07.2015, 11:13

для начала $q=$_GET['q']; это что?
ты отправляешь data: {search_name: name}, значит в гет у тебя должен быть $_GET['search_name'],
далее echo $row['price']."\r\n"; - зачем перевод строки? "\r\n" ?

ты используешь отладчик -xdebug? firebug? Это два необходимейших инструмента.

к примеру , ставишь firebug . и смотришь на вкладке "консоль", отправляется ли запрос, есть ли в нем корректная строка для поиска цены. Если отправляется, ОК, теперь надо посмотреть что происходит далее на сервере.

сам SQL запрос так же можно потестировать,например, в phpmyadmin. Введи его там , увидишь - что вернет тебе SQL сервер.

вот так, поэтапно , ты сможешь понять что происходит в твоем скрипте и, соответственно, заставить его работать ))))

@dadx · 13.07.2015, 11:23 **[ТС]**

$_GET['search_name'] ставил... не помогает...

Я так думаю что просто тут находится массив наименований а не то что я выбираю! var name = $('#tag').val();

А вот то что я выбираю с этого массива в инпуте уже нужно отправить....

Добавлено через 6 минут
Этот дебагер написал что гет пришел с списком того что у меня в базе (наименований товара) все.... больше никаких движений

@sharpay · 13.07.2015, 11:57

var name = $('#tag').val(); здесь находится то, что ты выбрал

Добавлено через 2 минуты
"Этот дебагер написал что гет пришел с списком того что у меня в базе (наименований товара) все.... больше никаких движений" - значит надо понять почему не отправляется

JavaScript
1
2
3
$.ajax({
   url: "getprice.php",
  data: { search_name: name   }

если он, конечно, не отправляется

поставь firebug , открой там консоль и смотри что происходит. можешь и скрин выложить , для лучшего понимания

@dadx · 13.07.2015, 12:13 **[ТС]**

Autocomplete: заполнение input-а на основании данных, выбранных из второго инпута

@sharpay · 13.07.2015, 13:01

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

https://dl.dropboxusercontent.... iflash.mp4

вот в этот момент и нужно смотреть , есть ли запрос

@dadx · 13.07.2015, 13:51 **[ТС]**

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

Добавлено через 15 минут
Ок, не могли бы вы скинуть рабочий пример всего этого? Если это конечно возможно? Может у меня библиотеки какие то не такие...

@sharpay · 13.07.2015, 14:04

так какой пример? это я для тебя набросал прямо в браузере, firebug -е )))

проверь выполняется ли у тебя вообще этот close-кусок. например , вот так :

JavaScript
1
2
3
4
5
//......................
close: function( event, ui ) {
alert('YO!');
 
}

@dadx · 13.07.2015, 14:49 **[ТС]**

Ничего абсолютно вообще не происходит...

Добавлено через 41 минуту
Ещё мысли?)))

@sharpay · 13.07.2015, 14:59

странно, ведь основной запрос происходит. можно повесить второй запрос на событие "input" tag .
но раз сейчас нет запроса , значит присутствует явная ошибка в коде

Добавлено через 53 секунды
могу глянуть через teamviewer

@dadx · 13.07.2015, 15:10 **[ТС]**

если конечно можно)

Добавлено через 2 минуты
Не знаю как в личку написать)

айди вивера: 135 630 764

пароль: 5107

@sharpay · 13.07.2015, 17:33

и не используй LIKE , а то возможно будет показана цена другого товара )

@dadx · 13.07.2015, 19:17 **[ТС]**

Дружыще sharpay!) Очень помог!!!) Все сижу с теми запросами до сих пор!) Вообщем мистика... если оставить так:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
    #Подключаемся к базе
    $q=$_GET['search_name'];
    $my_data=mysql_real_escape_string($q);
    $connect=mysqli_connect('1','2','3','4') or die("Database Error");
    $sql="SELECT * FROM sklad WHERE name LIKE '%$my_data%'";
    $result = mysqli_query($connect,$sql) or die(mysqli_error());
    if($result)
    {
        while($row=mysqli_fetch_array($result))
        {
            echo $row['price'];
 
        }
    }

Выводит мне все все все цены, без пробелов) Если делаю так:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    #Подключаемся к базе
    $q=$_GET['search_name'];
    $my_data=mysql_real_escape_string($q);
    $connect=mysqli_connect('1','2','3','4') or die("Database Error");
 
    $sql="SELECT price FROM sklad WHERE name='$my_data'";
 
    $result = mysqli_query($connect,$sql) or die(mysqli_error());
    if($result)
    {
        while($row=mysqli_fetch_array($result))
        {
            echo $row['price'];
 
        }
    }

Не выводит ничего))))) Как так?)

Добавлено через 3 минуты
Вот так пробывал разделить, прост все цены вподряд черед пробел дает и все)

PHP
1
echo $row['price']." ";

@sharpay · 13.07.2015, 19:43

mysql_real_escape_string возвращает тебе пустую строку. именно по-этому в первом варианте ты получаешь ВСЕ, а во втором ничего !!!!

попробуй mysqli_real_escape_string

@dadx · 13.07.2015, 20:43 **[ТС]**

Никак... пусто и все... все уже выбросил...

PHP
1
2
3
4
5
6
    #Подключаемся к базе
    $q=$_GET['search_name'];
    $connect=mysqli_connect(*********) or die("Database Error");
    $sql="SELECT price FROM sklad WHERE name='$q'";
    $result = mysqli_query($connection,$sql) or die(mysqli_error());
    while($row=mysqli_fetch_array($result)){echo $row['price'];}

@sharpay · 13.07.2015, 21:05

PHP
1
2
3
4
5
6
7
8
$q=$_GET['search_name'];
    $connect=mysqli_connect(*********) or die("Database Error");
    $sql="SELECT price FROM sklad WHERE name='$q'";
 
     var_dump($q) ;  // что выдает?!
 
    $result = mysqli_query($connection,$sql) or die(mysqli_error());
    while($row=mysqli_fetch_array($result)){echo $row['price'];}

@dadx · 13.07.2015, 21:11 **[ТС]**

string(16) "Капучино"

Добавлено через 1 минуту
А точнее string(0) "" а если нажать на поле или ещё куда тогда уже string(21) "Lays бекон 71 г"

@sharpay · 13.07.2015, 21:37

посмотри нет ли у тебя пробелов в начале или конце строки по которой ищешь, сделай ей trim ,
посмотри в логах , какой запрос получает твоя БД , что в нем не так.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@sharpay 28 / 28 / 8 Регистрация: 23.04.2013 Сообщений: 145
	13.07.2015, 11:13
	для начала $q=$_GET['q']; это что? ты отправляешь data: {search_name: name}, значит в гет у тебя должен быть $_GET['search_name'], далее echo $row['price']."\r\n"; - зачем перевод строки? "\r\n" ? ты используешь отладчик -xdebug? firebug? Это два необходимейших инструмента. к примеру , ставишь firebug . и смотришь на вкладке "консоль", отправляется ли запрос, есть ли в нем корректная строка для поиска цены. Если отправляется, ОК, теперь надо посмотреть что происходит далее на сервере. сам SQL запрос так же можно потестировать,например, в phpmyadmin. Введи его там , увидишь - что вернет тебе SQL сервер. вот так, поэтапно , ты сможешь понять что происходит в твоем скрипте и, соответственно, заставить его работать )))) 0

@dadx 0 / 0 / 0 Регистрация: 12.07.2015 Сообщений: 16
	13.07.2015, 11:23 [ТС]
	$_GET['search_name'] ставил... не помогает... Я так думаю что просто тут находится массив наименований а не то что я выбираю! var name = $('#tag').val(); А вот то что я выбираю с этого массива в инпуте уже нужно отправить.... Добавлено через 6 минут Этот дебагер написал что гет пришел с списком того что у меня в базе (наименований товара) все.... больше никаких движений 0

@dadx 0 / 0 / 0 Регистрация: 12.07.2015 Сообщений: 16
	13.07.2015, 12:13 [ТС]
	0

@sharpay 28 / 28 / 8 Регистрация: 23.04.2013 Сообщений: 145
	13.07.2015, 13:01
	скрины можно вставлять прямо сюда, если они не слишком большие. вот смотри что происходит когда мы работаем с автодополнением. запрос должен отправляться после того как мы выберем какое-то значение из предлагаемых. https://dl.dropboxusercontent.... iflash.mp4 вот в этот момент и нужно смотреть , есть ли запрос 0

@dadx 0 / 0 / 0 Регистрация: 12.07.2015 Сообщений: 16
	13.07.2015, 13:51 [ТС]
	Ну у меня там при нажатии на инпут мой появляется то что на скрине и все, больше ничего не после выбора даже повторного... Добавлено через 15 минут Ок, не могли бы вы скинуть рабочий пример всего этого? Если это конечно возможно? Может у меня библиотеки какие то не такие... 0

@dadx 0 / 0 / 0 Регистрация: 12.07.2015 Сообщений: 16
	13.07.2015, 14:49 [ТС]
	Ничего абсолютно вообще не происходит... Добавлено через 41 минуту Ещё мысли?))) 0

@sharpay 28 / 28 / 8 Регистрация: 23.04.2013 Сообщений: 145
	13.07.2015, 14:59
	странно, ведь основной запрос происходит. можно повесить второй запрос на событие "input" tag . но раз сейчас нет запроса , значит присутствует явная ошибка в коде Добавлено через 53 секунды могу глянуть через teamviewer 0

@dadx 0 / 0 / 0 Регистрация: 12.07.2015 Сообщений: 16
	13.07.2015, 15:10 [ТС]
	если конечно можно) Добавлено через 2 минуты Не знаю как в личку написать) айди вивера: 135 630 764 пароль: 5107 0

@sharpay 28 / 28 / 8 Регистрация: 23.04.2013 Сообщений: 145
	13.07.2015, 17:33
	и не используй LIKE , а то возможно будет показана цена другого товара ) 0

@sharpay 28 / 28 / 8 Регистрация: 23.04.2013 Сообщений: 145
	13.07.2015, 19:43
	mysql_real_escape_string возвращает тебе пустую строку. именно по-этому в первом варианте ты получаешь ВСЕ, а во втором ничего !!!! попробуй mysqli_real_escape_string 0

@dadx 0 / 0 / 0 Регистрация: 12.07.2015 Сообщений: 16
	13.07.2015, 21:11 [ТС]
	string(16) "Капучино" Добавлено через 1 минуту А точнее string(0) "" а если нажать на поле или ещё куда тогда уже string(21) "Lays бекон 71 г" 0

@sharpay 28 / 28 / 8 Регистрация: 23.04.2013 Сообщений: 145
	13.07.2015, 21:37
	посмотри нет ли у тебя пробелов в начале или конце строки по которой ищешь, сделай ей trim , посмотри в логах , какой запрос получает твоя БД , что в нем не так. 0