+ Ответить в теме
Показано с 1 по 2 из 2

Тема: Создание формы поиска на сайте. Не выводится результат поиска при вводе символов.

  1. #1
    Новичок Pavll на пути к лучшему Аватар для Pavll
    Регистрация
    23.02.2019
    Сообщений
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Создание формы поиска на сайте. Не выводится результат поиска при вводе символов.

    Добрый день!
    Создаю форму поиска с всплывающими подсказками.
    Попробую, выложить строки кода, имеющие отношение к сути проблемы и темы.
    Итак, имеется файл index.html. В нём для создания формы поиска я добавил следующие строки:
    <script src="//yandex.st/jquery/1.7.2/jquery.min.js"></script>

    далее, уже перед закрывающим тэгом </body>
    <script type="text/javascript"> var suggest_count = 0; var input_initial_value = ''; var suggest_selected = 0;   $(window).load(function(){     // читаем ввод с клавиатуры     $("#search_box").keyup(function(I){         // определяем какие действия нужно делать при нажатии на клавиатуру         switch(I.keyCode) {             // игнорируем нажатия на эти клавишы             case 13:  // enter             case 27:  // escape             case 38:  // стрелка вверх             case 40:  // стрелка вниз             break;               default:                 // производим поиск только при вводе более 2х символов                 if($(this).val().length>2){                       input_initial_value = $(this).val();                     // производим AJAX запрос к /ajax/ajax.php, передаем ему GET query, в который мы помещаем наш запрос                     $.get("ajax.php", { "query":$(this).val() },function(data){                         //php скрипт возвращает нам строку, ее надо распарсить в массив.                         // возвращаемые данные: ['test','test 1','test 2','test 3']                         var list = eval("("+data+")");                         suggest_count = list.length;                         if(suggest_count > 0){                             // перед показом слоя подсказки, его обнуляем                             $("#search_advice_wrapper").html("").show();                             for(var i in list){                                 if(list[i] != ''){                                     // добавляем слою позиции                                     $('#search_advice_wrapper').append('<div class="advice_variant">'+list[i]+'</div>');                                 }                             }                         }                     }, 'html');                 }             break;         }     });       //считываем нажатие клавишь, уже после вывода подсказки     $("#search_box").keydown(function(I){         switch(I.keyCode) {             // по нажатию клавишь прячем подсказку             case 13: // enter             case 27: // escape                 $('#search_advice_wrapper').hide();                 return false;             break;             // делаем переход по подсказке стрелочками клавиатуры             case 38: // стрелка вверх             case 40: // стрелка вниз                 I.preventDefault();                 if(suggest_count){                     //делаем выделение пунктов в слое, переход по стрелочкам                     key_activate( I.keyCode-39 );                 }             break;         }     });       // делаем обработку клика по подсказке     $('.advice_variant').live('click',function(){         // ставим текст в input поиска         $('#search_box').val($(this).text());         // прячем слой подсказки         $('#search_advice_wrapper').fadeOut(350).html('');     });       // если кликаем в любом месте сайта, нужно спрятать подсказку     $('html').click(function(){         $('#search_advice_wrapper').hide();     });     // если кликаем на поле input и есть пункты подсказки, то показываем скрытый слой     $('#search_box').click(function(event){         //alert(suggest_count);         if(suggest_count)             $('#search_advice_wrapper').show();         event.stopPropagation();     }); });   function key_activate(n){     $('#search_advice_wrapper div').eq(suggest_selected-1).removeClass('active');       if(n == 1 && suggest_selected < suggest_count){         suggest_selected++;     }else if(n == -1 && suggest_selected > 0){         suggest_selected--;     }       if( suggest_selected > 0){         $('#search_advice_wrapper div').eq(suggest_selected-1).addClass('active');         $("#search_box").val( $('#search_advice_wrapper div').eq(suggest_selected-1).text() );     } else {         $("#search_box").val( input_initial_value );     } } </script>

    Имеется и файл style.css, в котором для придания стиля форме такие стили:
    .search_area{             width: 350px;             margin: 0px;             position: relative;         }           #search_box{             width:200px;             padding:2px;             margin:1px;             border:1px solid #000;         }                 #search_advice_wrapper{             display:none;             width: 350px;             background-color: rgb(80, 80, 114);             color: rgb(255, 227, 189);             -moz-opacity: 0.95;             opacity: 0.95;             -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=95);             filter: progid:DXImageTransform.Microsoft.Alpha(opacity=95);             filter:alpha(opacity=95);             z-index:999;             position: absolute;             top: 24px; left: 0px;         }           #search_advice_wrapper .advice_variant{             cursor: pointer;             padding: 5px;             text-align: left;         }         #search_advice_wrapper .advice_variant:hover{             color:#FEFFBD;             background-color:#818187;         }         #search_advice_wrapper .active{             cursor: pointer;             padding: 5px;             color:#FEFFBD;             background-color:#818187;         }

    И файл ajax.php, который предназначен (насколько понимаю или я ошибаюсь?) для обработки ввода с клавиатуры и последующего вывода результатов поиска на сайте. Его содержимое:
    <?php     if(!empty($_GET['query'])){         $query = (string)$_GET['query'];         $array = array();         $request  = $db->query("SELECT `description`, `name` FROM `prefix_name` WHERE `description` LIKE '%". $db->real_escape_string($query) . "%' OR `name` LIKE '%". $db->real_escape_string($query) . "%' LIMIT 0, 10");         while($data =$db->fetch_assoc($request)){             $array[] = $data['name'];         }           echo "['".implode("','", $array)."']";     }     exit();      ?>



    Так вот, по идее, должно получатся так, что, во-первых, при вводе символов должны появляться подсказки, а затем при нажатии на них - результаты поиска на сайте, но ничего этого нет! Также, если я, например, вовсе удалю файл ajax.php, то ничего не меняется. Что есть этот файл, что его нет - разницы никакой! Вопрос - почему так? Может быть, я неправильно прописываю путь к этому файлу? Файлы index.html и ajax.php находятся в папке www, являющейся для них родительской. Или, как мне некоторые говорят, необходимо сначала создать базу данных на сайте, чтобы производилась выборка из неё при помощи этого скрипта?

  2. #2
    Местный Degradator скоро придёт к известности Аватар для Degradator
    Регистрация
    02.07.2012
    Сообщений
    2,041
    Thanks
    141
    Thanked 151 Times in 151 Posts
    1. отфарматируй вопрос, таким образом, чтобы код был читаем
    2. Когда ты это все делал, то просто взял откуда-то пример, и залил на свой хост ничего не меняя?
    3. Пробовал ли ты смотреть в отладчик браузера, вкладку network?

+ Ответить в теме

Похожие темы

  1. Ответов: 1
    Последнее сообщение: 25.06.2017, 14:27
  2. создание поиска на сайте
    от Dimantimakov в разделе CSS
    Ответов: 0
    Последнее сообщение: 15.11.2012, 10:17
  3. Ответов: 3
    Последнее сообщение: 05.08.2010, 00:31
  4. Модернизация поиска Google на сайте
    от Sergey в разделе JavaScript
    Ответов: 9
    Последнее сообщение: 29.10.2008, 18:29
  5. поле поиска на сайте
    от [weber] в разделе HTML
    Ответов: 5
    Последнее сообщение: 29.03.2008, 01:30

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения