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 :: JS autocomplete своими руками

 PHP.SU

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


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

> Без описания
Поиск в теме | Версия для печати
maragon
Отправлено: 09 Июля, 2014 - 20:29:34
Post Id



Посетитель


Покинул форум
Сообщений всего: 340
Дата рег-ции: Февр. 2011  


Помог: 2 раз(а)
Не стал искать легких путей, решил сам сварганить автозаполнение + расширение input.
Если я покидаю input, при этом в нем есть информация и снова на него нажимаю, данные в автозаполнении должны остаться.. у меня остаются, но правильно ли сделано?

Можно ли облегчить сие творение?

JS:
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(document).ready(function(){
  3. var autocomplete = {
  4. top_search: function(){
  5. $(function() {
  6.     $(".top-search-input").focus(function(){
  7.         $(this).css( "width", "200px");
  8.         $(".icon-search").hide();
  9.         //Обновляем список при вводе нового значения
  10.                 $(".top-search-input").keyup(function() {
  11.                 var value = $(this).val();
  12.                 var length = $(this).val().length;
  13.                 if((length) > 3){
  14.                 if(value != ''){
  15.                 $.ajax({
  16.                 type: "POST",
  17.                 url: "/1.php",
  18.                 data: value,
  19.                 cache: false,
  20.                 success: function(html){
  21.                 $(".top-search-autocomplete").show();
  22.                 }
  23.                 });
  24.                 }
  25.                 }    
  26.         });
  27.         //Обновляем список, если присутствует в input информация
  28.                 var value = $(this).val();
  29.                 var length = $(this).val().length;
  30.                 if((length) > 3){
  31.                 if(value != ''){
  32.                 $.ajax({
  33.                 type: "POST",
  34.                 url: "/1.php",
  35.                 data: value,
  36.                 cache: false,
  37.                 success: function(html){
  38.                 $(".top-search-autocomplete").show();
  39.                 }
  40.                 });
  41.                 }
  42.         }    
  43.         //Скрываем форму autocomplete и меняем ширину input    
  44.     }).blur(function(){
  45.         $(this).css( "width", "100px");
  46.                 $(".icon-search").show();
  47.                 $(".top-search-autocomplete").hide();
  48.     });
  49. });
  50. }
  51. }
  52. autocomplete.top_search();
  53. });
  54.  


Форма:
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. <div style="position: absolute;margin-left: -30px;margin-top:-15px; width: 100px;">
  3. <form action="" method="POST">
  4. <div class="icon-search">&nbsp;</div>
  5. <input class="top-search-input" id="top-search-text" placeholder="Поиск...">
  6. </form>
  7. </div>
  8. <div class="top-search-autocomplete" style="display:none;">!</div>
  9.  


-----
https://vk[dot]com/tvoycase_ru - Твой чехол со своим дизайном
 
 Top
tuareg
Отправлено: 09 Июля, 2014 - 21:04:34
Post Id


Участник


Покинул форум
Сообщений всего: 1234
Дата рег-ции: Июнь 2010  


Помог: 69 раз(а)
Спрячьте и не показывайте больше никому
P.S Не обижайтесь, но даже комментировать этот код не хочется Недовольство, огорчение
 
 Top
maragon
Отправлено: 09 Июля, 2014 - 22:02:30
Post Id



Посетитель


Покинул форум
Сообщений всего: 340
Дата рег-ции: Февр. 2011  


Помог: 2 раз(а)
На обиженных .. возят! Закатив глазки
Наведите на правильную мысль, раз на то пошло.


-----
https://vk[dot]com/tvoycase_ru - Твой чехол со своим дизайном
 
 Top
IllusionMH
Отправлено: 09 Июля, 2014 - 22:22:34
Post Id



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


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
CODE (javascript):
скопировать код в буфер обмена
  1. var value = $(this).val();
  2. var length = $(this).val().length;

зачем одно и тоже 2 раза.
CODE (javascript):
скопировать код в буфер обмена
  1. if((length) > 3){
  2. if(value != ''){

Даже с термя символами нулевой длины не уверен что выполнится второе условие.
Зачем в функции все еще раз заворачивать в функцию которая выполниться после загркзки контента? Почему б все не сделать сразу исполение только после загрузки дома?
И как оптимизация, проверять не изменение значения и добавлять некоторый таймаут после которого делать запрос и сбрасывать его после каждого нового нажатия при котором меняется текст

(Отредактировано автором: 09 Июля, 2014 - 22:26:53)

 
 Top
Panoptik
Отправлено: 10 Июля, 2014 - 10:02:21
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2493
Дата рег-ции: Нояб. 2011  
Откуда: Одесса, Украина


Помог: 131 раз(а)
ну и вынести повторяющиеся куски кода в отдельные функции...


-----
Just do it
 
 Top
esterio
Отправлено: 10 Июля, 2014 - 11:05:58
Post Id



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


Покинул форум
Сообщений всего: 5025
Дата рег-ции: Нояб. 2012  
Откуда: Украина, Львов


Помог: 127 раз(а)
ну как пример можно сдеалть следующее
CODE (javascript):
скопировать код в буфер обмена
  1. var t;
  2. function keyup(){
  3.         // ...
  4. }
  5. $(".top-search-input").keyup(function(e){
  6.         clearTimeout(t);
  7.         t = setTimeout(keyup, 1000);
  8. });

тоесть при нажатии ждать 1 секунду. если пользователь будет резко нажимать клавиши то лишний раз запрос не будет отослан
 
 Top
tuareg
Отправлено: 10 Июля, 2014 - 19:34:32
Post Id


Участник


Покинул форум
Сообщений всего: 1234
Дата рег-ции: Июнь 2010  


Помог: 69 раз(а)
Вы посмотрите код автокомплита jQuery UI многое станет понятно Улыбка
 
 Top
maragon
Отправлено: 11 Июля, 2014 - 19:18:09
Post Id



Посетитель


Покинул форум
Сообщений всего: 340
Дата рег-ции: Февр. 2011  


Помог: 2 раз(а)
Спасибо всем кто дал точку опоры!
Библиотеки готовые использовать не хочу.. хочется своего - живого Улыбка

js:
CODE (javascript):
скопировать код в буфер обмена
  1. function top_serch_show(inputString) {
  2.                 if(inputString.length == 0) {
  3.                         $('#suggestions').hide();
  4.                 } else {
  5.                 setTimeout(function() {
  6.                 $.post("1.php", {queryString: ""+inputString+""}, function(data){
  7.                                 if(data.length >0) {
  8.                                         $('#suggestions').show();
  9.                                         $('#autoSuggestionsList').html(data);
  10.                                 }
  11.                         });
  12.  
  13.     }, 1000);
  14. }
  15. }
  16. function top_serch_hide(thisValue) {
  17.                 $('#inputString').val(thisValue);
  18.                 $('#suggestions').hide();
  19. }
  20.  


Html:
CODE (html):
скопировать код в буфер обмена
  1. <div style="position: absolute;margin-left: -30px;margin-top:-15px; width: 100px;">
  2. <form action="" method="GET">
  3. <div class="icon-search">&nbsp;</div>
  4. <input class="top-search-input" id="top-search-text" onClick="top_serch_show(this.value);" onKeyup="top_serch_show(this.value);" onBlur="top_serch_hide(this.value);" placeholder="Поиск треков...">
  5. <div class="suggestionsBox" id="suggestions" style="display: none;">
  6. <img src="{theme}/images/upArrow.png" style="position: relative; top: -10px; left: 30px;" alt="upArrow" />
  7. <div class="suggestionList" id="autoSuggestionsList">
  8. &nbsp;
  9. </div>
  10. </div>
  11. </form>
  12. </div>

Пример рабочий, запрос к файлу через интервал времени. Но.. Когда я пытаюсь нажать на элемент в блоке .suggestionList у меня автоматически скрывается окно автозаполнения. Причина тому onBlur="top_serch_hide(this.value);" в cтроке поиска input. Как обыграть? Хм

(Отредактировано автором: 11 Июля, 2014 - 19:19:06)



-----
https://vk[dot]com/tvoycase_ru - Твой чехол со своим дизайном
 
 Top
nerv
Отправлено: 11 Июля, 2014 - 22:30:00
Post Id



Посетитель


Покинул форум
Сообщений всего: 407
Дата рег-ции: Февр. 2013  
Откуда: Россия


Помог: 9 раз(а)
maragon пишет:
Библиотеки готовые использовать не хочу.. хочется своего - живого

Если "живой" ни "кривой" заменить, утверждение становится истинным Ха-ха

maragon пишет:
Как обыграть?

По гамме, например Подмигивание


-----
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
 
 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