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, появилась цена выбранная с базы по этому товару.... Спасайте!)

@dadx · 13.07.2015, 22:18 **[ТС]**

Попробывал так, в инпут летит запрос, причем полностью адекватный и проверенный в пхп май админ....

PHP
1
2
    $sql="SELECT price FROM sklad WHERE name='$_GET[search_name]'";
    echo $sql;

т

PHP
1
2
3
4
5
    
    $sql="SELECT price FROM sklad WHERE name='$_GET[search_name]'";
    $result = mysql_query($sql, $connect);
    $res=mysql_result($result, 0);
    echo $res;

Так уже ничего не выводит...

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

Добавлено через 29 минут
Нашел на одном форуме одно из решений...

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
$(document).ready(function() {
var CTvalue;
$("#counter_type").autocomplete('autocomplete_type.php', {
delay: 100,
minChars: 0,
max: 12,
autoFill: true,
mustMatch: true,
matchContains: false,
scrollHeight: 220
});
$("#counter_number").autocomplete('autocomplete_number.php', {
extraParams: {bar:CTvalue}
});
});
</script>
 
<input type="text" id="counter_type" onchange="CTvalue=this.value" />
<input type="text" id="counter_number" />

вот что парню ответили:

var ac = $("#counter_number")[0].autocompleter;

В событие на изменение counter_type засунуть это:
ac.setExtraParams({bar:CTvalue});

P.S.: не представляете как я себе мозг сломал пока разобрался в этом всём.

Напсали что все решилось и работает но не дописали как))))

@sharpay · 14.07.2015, 09:31

послушай. у тебя некорректный запрос к БД, все остальное насколько я помню работает. в интернете куча примеров, но пробовать все их в надежде, что хоть один поможет - путь ,имхо, тупиковый.Разберись в чем у тебя сейчас ошибка. посмотри ЛОГИ БД. если у тебя, к примеру, open server, там прямо есть пункт меню - "просмотр ЛОГОВ". Так-же, поставь отладчик - и пользуйся им.Это стандартные инструменты любого программиста. удачи )

зЫ в запросе $sql="SELECT price FROM sklad WHERE name='$_GET[search_name]'"; попробуй убрать маленькие кавычки.

@dadx · 14.07.2015, 11:08 **[ТС]**

Братишка, а если сделать все одним файлом в одном запросе?

Например так:

PHP
1
2
3
4
5
6
7
8
9
10
    $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['name']."\r".$row['price']."\n";
 
        }
    }

Таким образом я вывожу и цену и наименование, все работает) Отделить как то одно от другого, да и дело с концом?

@dadx · 14.07.2015, 11:12 **[ТС]**

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

@dadx · 14.07.2015, 12:06 **[ТС]**

PHP
1
2
3
4
5
6
7
8
9
10
    $sql="SELECT price FROM sklad WHERE name='Рафаелло'";
    $result = mysqli_query($connect,$sql) or die(mysqli_error());
    if($result){
        while($row=mysqli_fetch_array($result))
            {
                echo $row['price'];
 
            }
        }
    }

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

Добавлено через 12 минут
Решено!

Даю рабочий кусок кода, для тех кому понадобится!

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

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
<link rel="stylesheet" type="text/css" href="./ui/jquery.autocomplete.css" />
<script type="text/javascript" src="./jquery.js"></script>
<script 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>
<script type="text/javascript" src="./ui/jquery.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,
    scrollHeight: 300});
    $("#tag").blur(function(){
        $.ajax({
           url: "./ui/getprice.php",
           data: {search_name: $("#tag").val()},
           success: function(html){$("#tags").val(html);}
        });
    });        
});
</script>

Сами инпуты вставляем где угодно....(то что вы будете вводить в "tag" при выборе будет улетать в "tags"

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>

Файлики обработки запросов "autocomplete.php" и "getprice.php"

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
<?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_name') 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";}
        }
?>

getprice.php:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
    $connect=mysqli_connect('host','user','pass','db_name') 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='$_GET[search_name]'";
    $result = mysqli_query($connect,$sql) or die(mysqli_error());
    if($result){
        while($row=mysqli_fetch_array($result))
            {echo $row['price'];}
        }
?>

Огромнейшее спасибо уважаемому товарищу sharpay за то что разжевал помог и частично написал) Без тебя бы не справился)

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

@sharpay · 14.07.2015, 13:12

$("#tag").blur(function() вся эта петрушка срабатывает когда, фокус с этого инпута уходит - событие "blur".
можешь посмотреть другие события. но , имхо , оптимально было бы взять БОЛЕЕ СВЕЖИЙ autocomplete, где есть " close:" . так все работало бы без танцев с бубном

ЗЫ если помог, могешь клинкуть отзыв или "спасибу "

@dadx · 14.07.2015, 13:15 **[ТС]**

Да кликал уже) или мб не там кликал?) тут напротив сообщения или в профиле?

Добавлено через 30 секунд
п.с. если найду с close библиотеку, что нужно будет переписать?

@sharpay · 14.07.2015, 13:18

и еще WHERE name='$_GET[search_name]'" - вот это с точки зрения безопасности "ай яй яй!"
Почитай про SQL-инъекции.

@dadx · 14.07.2015, 13:19 **[ТС]**

Это не общедоступный ресурс, только для "своих")

@sharpay · 14.07.2015, 18:17

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

п.с. если найду с close библиотеку, что нужно будет переписать?

- вставишь туда $.ajax({
url: "./ui/getprice.php",
data: {search_name: $("#tag").val()},
success: function(html){$("#tags").val(html);}
});

Новые блоги и статьи Все статьи Все блоги /
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
	14.07.2015, 09:31
	Сообщение было отмечено dadx как решение Решение послушай. у тебя некорректный запрос к БД, все остальное насколько я помню работает. в интернете куча примеров, но пробовать все их в надежде, что хоть один поможет - путь ,имхо, тупиковый.Разберись в чем у тебя сейчас ошибка. посмотри ЛОГИ БД. если у тебя, к примеру, open server, там прямо есть пункт меню - "просмотр ЛОГОВ". Так-же, поставь отладчик - и пользуйся им.Это стандартные инструменты любого программиста. удачи ) зЫ в запросе $sql="SELECT price FROM sklad WHERE name='$_GET[search_name]'"; попробуй убрать маленькие кавычки. 1

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

@sharpay 28 / 28 / 8 Регистрация: 23.04.2013 Сообщений: 145
	14.07.2015, 13:12
	$("#tag").blur(function() вся эта петрушка срабатывает когда, фокус с этого инпута уходит - событие "blur". можешь посмотреть другие события. но , имхо , оптимально было бы взять БОЛЕЕ СВЕЖИЙ autocomplete, где есть " close:" . так все работало бы без танцев с бубном ЗЫ если помог, могешь клинкуть отзыв или "спасибу " 1

@dadx 0 / 0 / 0 Регистрация: 12.07.2015 Сообщений: 16
	14.07.2015, 13:15 [ТС]
	Да кликал уже) или мб не там кликал?) тут напротив сообщения или в профиле? Добавлено через 30 секунд п.с. если найду с close библиотеку, что нужно будет переписать? 0

@sharpay 28 / 28 / 8 Регистрация: 23.04.2013 Сообщений: 145
	14.07.2015, 13:18
	и еще WHERE name='$_GET[search_name]'" - вот это с точки зрения безопасности "ай яй яй!" Почитай про SQL-инъекции. 0

@dadx 0 / 0 / 0 Регистрация: 12.07.2015 Сообщений: 16
	14.07.2015, 13:19 [ТС]
	Это не общедоступный ресурс, только для "своих") 0

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

Решение