Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: проблема при использовании нескольких полей с "живым поиском"

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Поиск в теме | Версия для печати
FarawaySlv
Отправлено: 11 Апреля, 2016 - 14:27:34
Post Id


Новичок


Покинул форум
Сообщений всего: 3
Дата рег-ции: Апр. 2016  


Помог: 0 раз(а)
При использовании нескольких полей input с "живым поиском" возникла проблема при выборе значения из вариантов результатов поиска. При вводе в первое поле все ОК, при выборе значения для следующего поля значение подставляется не только в нужное поле, но и все вышестоящие и т.д. Необходимо чтобы в каждом поле сохранялся только выбранный для него вариант.
В реальном случает работа идет с базой данных откуда подбираются значения полей, в приведенном же ниже коде я просто смоделировал эту ситуацию в более простом варианте.

html страница:

CODE (html):
скопировать код в буфер обмена
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.         <meta charset="UTF-8">
  6.         <title>Girls</title>
  7.         <script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
  8.         <script type="text/javascript" src="js/function.js"></script>
  9. </head>
  10. <body>
  11.         <table>
  12.                 <thead>
  13.                         <tr>
  14.                                 <td>
  15.                                         Имя:
  16.                                 </td>
  17.                         </tr>
  18.                 </thead>
  19.                 <tbody>
  20.                         <tr>
  21.                                 <td>
  22.                                         <input type="text" name="name1" class="for_name">
  23.                                 </td>
  24.                         </tr>
  25.                         <tr>
  26.                                 <td>
  27.                                         <input type="text" name="name2" class="for_name">
  28.                                 </td>
  29.                         </tr>
  30.                         <tr>
  31.                                 <td>
  32.                                         <input type="text" name="name3" class="for_name">
  33.                                 </td>
  34.                         </tr>
  35.                         <tr>
  36.                                 <td>
  37.                                         <input type="text" name="name4" class="for_name">
  38.                                 </td>
  39.                         </tr>
  40.                         <tr>
  41.                                 <td>
  42.                                         <input type="text" name="name5" class="for_name">
  43.                                 </td>
  44.                         </tr>
  45.                 </tbody>
  46.         </table>
  47.         <ul class="search_result"></ul>
  48. </body>
  49. </html>
  50.  



Скрипт:
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. var d = document;
  3. $(d).ready(function() {
  4.         $('input.for_name').on("keyup", function() {
  5.         var ask = this.value; //после приема введенных в input данных записываю значение и имя тэга
  6.         var name = this.name;
  7.         var row = "";
  8. //отправляю запрос на php для подбора похожих имен
  9.          $.ajax({
  10.                 type: 'post',
  11.                 url: "test.php",
  12.                 data: {'ask' : ask},
  13.                 success: function(data) {
  14.                         variants = JSON.parse(data);
  15.                          //формирую результат для вывода в виде списка
  16.                         for (var i = 0; i < variants.length; i++) {
  17.                              row = row + "<li>" + variants[i] + "</li>";
  18.                         }
  19.                                 //вывожу список
  20.                         $(".search_result").html(row).fadeIn();
  21.                 }
  22.         })
  23.                    //при клике на вариант результатов поиска вношу его в поле input
  24.                 $(".search_result").on("click", "li", function() {
  25.                         $(d.getElementsByName(name)[0]).val($(this).text());
  26.                 })
  27.  
  28.         })
  29. })
  30.  



И php файл:

PHP:
скопировать код в буфер обмена
  1.  
  2. <?PHP
  3.         $girls = array('Катя', 'Кристина', 'Кира', 'Таня', 'Тамара', 'Тина', 'Наташа', 'Настя', 'Надежда', 'Маргарита', 'Мария', 'Мила', 'Антонина', 'Аня', 'Александра', 'Анастасия', 'Агрипина', 'Акулина', 'Амфиса', 'Вилена', 'Виолета', 'Виктория', 'Виталина');
  4.        
  5. //функция транслитерации
  6.         function translit($s) {
  7.                   $s = (string) $s;
  8.                   $s = strip_tags($s);
  9.                   $s = str_replace(array("\n", "\r"), " ", $s);
  10.                   $s = preg_replace("/\s+/", ' ', $s);
  11.                   $s = trim($s);
  12.                   $s = mb_strtolower($s, 'utf-8');
  13.                   $s = strtr($s, array("А"=>"A","Б"=>"B","В"=>"V","Г"=>"G", "Д"=>"D","Е"=>"E","Ж"=>"J","З"=>"Z","И"=>"I", "Й"=>"Y","К"=>"K","Л"=>"L","М"=>"M","Н"=>"N", "О"=>"O","П"=>"P","Р"=>"R","С"=>"S","Т"=>"T", "У"=>"U","Ф"=>"F","Х"=>"H","Ц"=>"TS","Ч"=>"CH", "Ш"=>"SH","Щ"=>"SCH","Ъ"=>"","Ы"=>"YI","Ь"=>"", "Э"=>"E","Ю"=>"YU","Я"=>"YA", 'а'=>'a','б'=>'b','в'=>'v','г'=>'g','д'=>'d','е'=>'e','ё'=>'e','ж'=>'j','з'=>'z','и'=>'i','й'=>'y','к'=>'k','л'=>'l','м'=>'m','н'=>'n','о'=>'o','п'=>'p','р'=>'r','с'=>'s','т'=>'t','у'=>'u','ф'=>'f','х'=>'h','ц'=>'c','ч'=>'ch','ш'=>'sh','щ'=>'shch','ы'=>'y','э'=>'e','ю'=>'yu','я'=>'ya','ъ'=>'','ь'=>''));
  14.                   $s = preg_replace("/[^0-9a-z-_ ]/i", "", $s);
  15.                   return $s;
  16. }
  17.  
  18.  
  19.         if ($_POST["ask"]) {
  20.                 $ask = translit($_POST["ask"]);
  21.                 $row = array();
  22.                 $k = 0;
  23.                 $num = strlen($ask);
  24.                      // иду по массиву и ищу похожие имена
  25.                 for ($i = 0; $i< count($girls); $i++) {
  26.                         $tmp_str = translit($girls[$i]);
  27.                         if ((substr($tmp_str, 0, $num)) == $ask) {
  28.                                 $row[$k] = $girls[$i];
  29.                                 $k++;
  30.                                 }
  31.                 }
  32.                 //перевожу json в формат
  33.                 echo json_encode($row);
  34.         }
  35. ?>
  36.  



Если из скрипта убрать ajax запрос и данные брать просто из массива сформированного в самом скрипте, а выбор варианта поиска описать
$(".search_result li").on("click", function() {
$(d.getElementsByName(name)[0]).val($(this).text());
})

все работает корректно. Т.е. если я правильно понял - проблема в формировании результатов поиска как результата ajax запроса (вынести данные за него и вывести строки li у меня не получилось...).

Помогите пожалуйста, неделю уже мучаюсь Улыбка.
 
 Top
Viper
Отправлено: 11 Апреля, 2016 - 14:54:19
Post Id



Активный участник


Покинул форум
Сообщений всего: 4555
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)
Не мешайте чистый javascript и jquery синтаксисы. Выглядит как говно, и сложно дебажить.
Формируйте всё внутри $.ajax метода. Вы не сможете вынести за этот метод результаты. Да это и не нужно.
variants = JSON.parse(data); лишнее

CODE (javascript):
скопировать код в буфер обмена
  1. var $this = $(this);
  2.  
  3. $.ajax({
  4.         ...
  5.         success: function(data) {
  6.                 //формирую результат для вывода в виде списка
  7.                 for (var i = 0; i < data.length; i++) {
  8.                         row = row + "<li>" + data[i] + "</li>";
  9.                 }
  10.  
  11.                 $(".search_result").on("click", "li", function() {
  12.                         $this.val($(this).text());
  13.                 });
  14.                 //вывожу список
  15.                 $(".search_result").html(row).fadeIn();
  16.         }
  17. });


-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
FarawaySlv
Отправлено: 11 Апреля, 2016 - 16:33:55
Post Id


Новичок


Покинул форум
Сообщений всего: 3
Дата рег-ции: Апр. 2016  


Помог: 0 раз(а)
Насчет качества кода согласен, но пока по другому не могу Недовольство, огорчение.
Вы проверяли написанный вами код на работоспособность? У меня почему-то без variants = JSON.parse(data), data - это кодированная строка, которая абсолютно нечитабельная (возможно в настройках ajax запроса можно что-то указать и решить эту проблему без использования parse). Сам результат выполнения скрипта ничем не отличается от того что был у меня - все-равно при изменении нижних полей изменяются значения и верхних... Недовольство, огорчение.
А не подскажите почему не работает вариант с записью (при такой форме записи у меня все корректно работало в тестовом варианте без ajax запроса)
$(".search_result li").on("click", function() {
$this.val($(this).text());
});
а, только с $(".search_result").on("click", "li", function() {
$this.val($(this).text());
});
?

Провел эксперимент, хочу уточнить что синхронно меняются значения только у тех полей, у которых событие keyup уже происходило, независимо от их порядка. Может скрипт "запоминает" что за этим полем уже закреплено событие и каждый раз обновляет его значение...

(Отредактировано автором: 11 Апреля, 2016 - 17:23:30)

 
 Top
Viper
Отправлено: 11 Апреля, 2016 - 17:48:36
Post Id



Активный участник


Покинул форум
Сообщений всего: 4555
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)
Мда. Есть траблы. После keyup нужно делать что-то типа unbind события, иначе вешается на все поля где жмем кнопки.
Я бы переделал иначе.
1. Взял готовое решение.
2. или если свой велосипед, то обрабатывать каждый инпут.


-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
FarawaySlv
Отправлено: 11 Апреля, 2016 - 18:21:14
Post Id


Новичок


Покинул форум
Сообщений всего: 3
Дата рег-ции: Апр. 2016  


Помог: 0 раз(а)
попробовал поставить $this.unbind() в разных вариациях, не срабатывает. Каждый инпут отдельно обрабатывать не вариант, на практике их может быть больше 10. Готового варианта тоже найти не получилосьНедовольство, огорчение.
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB