Создать ответ 
JQuery - команда открытия новой вкладки --- Поиск в сайте
Автор Сообщение
Булат Азат улы Не на форуме
Младший сержант
*

Сообщений: 22
У нас с: Mar 2016
Сообщение: #1
JQuery - команда открытия новой вкладки --- Поиск в сайте
Делаю сайт, и хочу вставить туда поисковик. Шаблон поисковика уже нашел, немножко подогнал под себя. Но есть проблема - результаты поиска показываются в той странице, где человек нажал на "поиск". То есть в HTML ставятся специальные div-блоки, где и наполняются результаты поиска.
А мне надо, чтобы формы ввода были на каждой странице, а после нажатия на кнопку "поиск" открывалась новая страница, сделанная под поиск. Помогите, пожалуйста, где что мне нужно добавить?
Вот код, который ставится в HTML (нижний div с id "resultsDiv" и нужно "перенести" в отдельную страницу под поиск, а форму расставить на всех страницах):
Код:
<form id="searchForm" method="post">
               <input id="s" type="text" />
            <input type="submit" value="Submit" id="submitButton" />
    </form>

    <div id="resultsDiv"></div>

А вот большой и длинный код яваскрипта (точнее, JQuery):
Код:
$(document).ready(function(){
    
    var config = {
        siteURL        : 'gabdullatukay.ru',    // Сайт поиска
        searchSite    : true,
        type        : 'web',
        append        : false,
        perPage        : 8,            // Для Google максимум 8
        page        : 0                // Первая страница
    }

    $('#searchForm').submit(function(){
        googleSearch();
        return false;
    });    
    
    function googleSearch(settings){
        
        // Если никаких аргументов не было передано функции,
        // то будут использоваться значения по умолчанию из объекта конфигурации:
        
        settings = $.extend({},config,settings);
        settings.term = settings.term || $('#s').val();
        
        if(settings.searchSite){
            // Используем  опцию для Google site:example.com для ограничения поиска
            // по определенному домену:
            settings.term = 'site:'+settings.siteURL+' '+settings.term;
        }
        
        // URL API Google AJAX Search
        var apiURL = 'http://ajax.googleapis.com/ajax/services/search/'+settings.type+'?v=1.0&callback=?';
        var resultsDiv = $('#resultsDiv');
        
        $.getJSON(apiURL,{q:settings.term,rsz:settings.perPage,start:settings.page*​settings.perPage},function(r){
            
            var results = r.responseData.results;
            $('#more').remove();
            
            if(results.length){
                
                // Если результат был возвращен, добавляем его к элементу div pageContainer,
                // который затем добавлет его к #resultsDiv:
                
                var pageContainer = $('<div>',{className:'pageContainer'});
                
                for(var i=0;i<results.length;i++){
                    // Создаем новый объект результата и запускаем его метод toString:
                    pageContainer.append(new result(results[i]) + '');
                }
                
                if(!settings.append){
                    // Данный код выполняется, если запускается новый поиск
                    // вместо нажатия на кнопку _Показать еще_:
                    resultsDiv.empty();
                }
                
                pageContainer.append('<div class="clear"></div>')
                             .hide().appendTo(resultsDiv)
                             .fadeIn('slow');
                
                var cursor = r.responseData.cursor;

                if( +cursor.estimatedResultCount > (settings.page+1)*settings.perPage){
                    $('<div>',{id:'more'}).appendTo(resultsDiv).click(function(){
                        googleSearch({append:true,page:settings.page+1});
                        $(this).fadeOut();
                    });
                }
            }
            else {
                resultsDiv.empty();
                $('<p>',{className:'notFound',html:'По вашему запросу ничего не найдено!'}).hide().appendTo(resultsDiv).fadeIn();
            }
        });
    }
    
    function result(r){
        var arr = [];
        switch(r.GsearchResultClass){
            case 'GwebSearch':
                arr = [
                    '<div class="webResult">',
                    '<h2><a href="',r.unescapedUrl,'" target="_blank">',r.title,'</a></h2>',
                    '<p>',r.content,'</p>',
                    '<a href="',r.unescapedUrl,'" target="_blank">',r.visibleUrl,'</a>',
                    '</div>'
                ];
            break;
            case 'GimageSearch':
                arr = [
                    '<div class="imageResult">',
                    '<a target="_blank" href="',r.unescapedUrl,'" title="',r.titleNoFormatting,'" class="pic" style="width:',r.tbWidth,'px;height:',r.tbHeight,'px;">',
                    '<img src="',r.tbUrl,'" width="',r.tbWidth,'" height="',r.tbHeight,'" /></a>',
                    '<div class="clear"></div>','<a href="',r.originalContextUrl,'" target="_blank">',r.visibleUrl,'</a>',
                    '</div>'
                ];
            break;
            case 'GvideoSearch':
                arr = [
                    '<div class="imageResult">',
                    '<a target="_blank" href="',r.url,'" title="',r.titleNoFormatting,'" class="pic" style="width:150px;height:auto;">',
                    '<img src="',r.tbUrl,'" width="100%" /></a>',
                    '<div class="clear"></div>','<a href="',r.originalContextUrl,'" target="_blank">',r.publisher,'</a>',
                    '</div>'
                ];
            break;
            case 'GnewsSearch':
                arr = [
                    '<div class="webResult">',
                    '<h2><a href="',r.unescapedUrl,'" target="_blank">',r.title,'</a></h2>',
                    '<p>',r.content,'</p>',
                    '<a href="',r.unescapedUrl,'" target="_blank">',r.publisher,'</a>',
                    '</div>'
                ];
            break;
        }
        
        this.toString = function(){
            return arr.join('');
        }
    }
});

Помогите пожалуйста, буду очень благодарен Help
27.03.2016 07:37:48
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #2
RE: JQuery - команда открытия новой вкладки --- Поиск в сайте
Так вроде ничего сложного. Прописываем в форму action и отправляем поисковый запрос на страничку поиска.

Для этого на всех страничках (а еще лучше в шаблон сайта) добавляем форму для поиска:
Код:
<form id="searchForm" method="post" action="77.php">
    <input id="s" name="search_text" type="text" />
    <input type="submit" value="Submit" id="submitButton" />
</form>

77.php - страничка для поиска, замените на нужную Вам.

Далее на страничку поиска добавляете код, который Вы привели с небольшими изменениями. А именно, в том месте где должна быть форма поиска и результаты поиска вставляете:
PHP код:
<form id="searchForm" method="post" action="77.php">
    <
input id="s" name="search_text" type="text" value="<?php echo $_POST["search_text"];?>"/>
    <
input type="submit" value="Submit" id="submitButton" />
</
form>

<
div id="resultsDiv"></div

А внутри JS кода вместо:
Код:
$('#searchForm').submit(function(){
    googleSearch();
    return false;
});

Добавляете:
PHP код:
<?php if (isset($_POST["search_text"])) echo 'googleSearch()';?>
27.03.2016 14:45:49
Найти все сообщения Цитировать это сообщение
Булат Азат улы Не на форуме
Младший сержант
*

Сообщений: 22
У нас с: Mar 2016
Сообщение: #3
RE: JQuery - команда открытия новой вкладки --- Поиск в сайте
Большое спасибо за помощь! Но не могли бы вы вместо PHP написать мне код для HTML и Яваскрипта, а то я язык PHP пока не изучил, не знаю вообще, и пишу сайт только на HTML и Javascript. Или этот код можно и в HTML добавить?

Ах да, у меня в HTML не работает. Даже на странице поиска, когда добавил показанный вами код, в строке поиска вывелись <?php echo $_POST[, и с правой стороны формы, прямо рядом ввода, вывелось это: ];?>. Как я понимаю, HTML этот код не понимает, да?
После того, как все поставил, как Вы написали, при нажатии на "искать" у меня начала открываться нужная страница, но результаты поиска не выводились.
(Последний раз сообщение было отредактировано 27.03.2016 в 15:53:25, отредактировал пользователь Булат Азат улы.)
27.03.2016 15:37:10
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #4
RE: JQuery - команда открытия новой вкладки --- Поиск в сайте
Если у Вас сервер поддерживает PHP и включена обработка PHP кода внутри HTML файлов, то все должно получиться. Если нет - беда. Как вариант, можно попробовать передавать поисковый запрос через cookie, но это муторно, да и не у всех может работать (т.к. некоторые блокируют cookie).

Попробуйте включить обработка PHP кода внутри HTML файлов. Для этого добавьте в файл .htaccess строчку:
Код:
AddHandler application/x-httpd-php .htm .html
27.03.2016 15:58:12
Найти все сообщения Цитировать это сообщение
Булат Азат улы Не на форуме
Младший сержант
*

Сообщений: 22
У нас с: Mar 2016
Сообщение: #5
RE: JQuery - команда открытия новой вкладки --- Поиск в сайте
До этого я делал сайт просто на жестком диске, сейчас установил денвер, добавил в htaccess код, который Вы написали, и на страничке поиска в поле ввода часть кода перестал показываться. Как я понимаю, теперь денвер понимает PHP... Но при нажатии "поиск" у меня, как и полагается, открывается нужная страница, а результатов поиска нету. Помогите пожалуйста и с этой проблемой. Не зависит ли это от того, что я написал не action="77.php", а 77.html? Или, от того, что яваскрипт у меня находится в отдельном файле.js?
27.03.2016 20:16:47
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #6
RE: JQuery - команда открытия новой вкладки --- Поиск в сайте
Чтобы узнать работает ли у Вас на страничке 77.html PHP код добавьте туда строчку:<?php echo 'Тест';?>
Если на экране появится слово Тест без слова echo - то работает.

Если Вы вынесли JS код во внешний js файл, то в таком виде работать не будет, т.к. там присутствовал PHP код.

Тогда страничка поиска должна выглядеть так:
Код:
<form id="searchForm" method="post" action="77.php">
    <input id="s" name="search_text" type="text" value="<?php echo $_POST["search_text"];?>"/>
    <input type="submit" value="Submit" id="submitButton" />
</form>

<div id="resultsDiv"></div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript" src="77.js"></script>

<script type="text/javascript">
$(document).ready(function(){
<?php if (isset($_POST["search_text"])) echo 'googleSearch()';?>
});
</script>

А внешний js файл (у нас в верхнем коде он называется 77.js) выглядит так:
Код:
var config = {
     siteURL    : 'gabdullatukay.ru',    // Сайт поиска
     searchSite    : true,
     type        : 'web',
     append        : false,
     perPage    : 8,            // Для Google максимум 8
     page        : 0                // Первая страница
}

function googleSearch(settings){
     // Если никаких аргументов не было передано функции,
     // то будут использоваться значения по умолчанию из объекта конфигурации:

     settings = $.extend({},config,settings);
     settings.term = settings.term || $('#s').val();

     if(settings.searchSite){
         // Используем  опцию для Google site:example.com для ограничения поиска
         // по определенному домену:
         settings.term = 'site:'+settings.siteURL+' '+settings.term;
     }

     // URL API Google AJAX Search
     var apiURL = 'http://ajax.googleapis.com/ajax/services/search/'+settings.type+'?v=1.0&callback=?';
     var resultsDiv = $('#resultsDiv');

     $.getJSON(apiURL,{q:settings.term,rsz:settings.perPage,start:settings.page*setti​ngs.perPage},function(r){

         var results = r.responseData.results;
         $('#more').remove();

         if(results.length){

             // Если результат был возвращен, добавляем его к элементу div pageContainer,
             // который затем добавлет его к #resultsDiv:

             var pageContainer = $('<div>',{className:'pageContainer'});

             for(var i=0;i<results.length;i++){
                 // Создаем новый объект результата и запускаем его метод toString:
                 pageContainer.append(new result(results[i]) + '');
             }

             if(!settings.append){
                 // Данный код выполняется, если запускается новый поиск
                 // вместо нажатия на кнопку _Показать еще_:
                 resultsDiv.empty();
             }

             pageContainer.append('<div class="clear"></div>')
                          .hide().appendTo(resultsDiv)
                          .fadeIn('slow');

             var cursor = r.responseData.cursor;

             if( +cursor.estimatedResultCount > (settings.page+1)*settings.perPage){
                 $('<div>',{id:'more'}).appendTo(resultsDiv).click(function(){
                     googleSearch({append:true,page:settings.page+1});
                     $(this).fadeOut();
                 });
             }
         }
         else {
             resultsDiv.empty();
             $('<p>',{className:'notFound',html:'По вашему запросу ничего не найдено!'}).hide().appendTo(resultsDiv).fadeIn();
         }
     });
}

function result(r){
     var arr = [];
     switch(r.GsearchResultClass){
         case 'GwebSearch':
             arr = [
                 '<div class="webResult">',
                 '<h2><a href="',r.unescapedUrl,'" target="_blank">',r.title,'</a></h2>',
                 '<p>',r.content,'</p>',
                 '<a href="',r.unescapedUrl,'" target="_blank">',r.visibleUrl,'</a>',
                 '</div>'
             ];
         break;
         case 'GimageSearch':
             arr = [
                 '<div class="imageResult">',
                 '<a target="_blank" href="',r.unescapedUrl,'" title="',r.titleNoFormatting,'" class="pic" style="width:',r.tbWidth,'px;height:',r.tbHeight,'px;">',
                 '<img src="',r.tbUrl,'" width="',r.tbWidth,'" height="',r.tbHeight,'" /></a>',
                 '<div class="clear"></div>','<a href="',r.originalContextUrl,'" target="_blank">',r.visibleUrl,'</a>',
                 '</div>'
             ];
         break;
         case 'GvideoSearch':
             arr = [
                 '<div class="imageResult">',
                 '<a target="_blank" href="',r.url,'" title="',r.titleNoFormatting,'" class="pic" style="width:150px;height:auto;">',
                 '<img src="',r.tbUrl,'" width="100%" /></a>',
                 '<div class="clear"></div>','<a href="',r.originalContextUrl,'" target="_blank">',r.publisher,'</a>',
                 '</div>'
             ];
         break;
         case 'GnewsSearch':
             arr = [
                 '<div class="webResult">',
                 '<h2><a href="',r.unescapedUrl,'" target="_blank">',r.title,'</a></h2>',
                 '<p>',r.content,'</p>',
                 '<a href="',r.unescapedUrl,'" target="_blank">',r.publisher,'</a>',
                 '</div>'
             ];
         break;
     }

     this.toString = function(){
         return arr.join('');
     }
}

На всякий случай прикрепил архив с этими файлами.


Прикрепления
.rar  77.rar (Размер: 1.88 Кб / Загрузок: 3)
27.03.2016 21:05:23
Найти все сообщения Цитировать это сообщение
Булат Азат улы Не на форуме
Младший сержант
*

Сообщений: 22
У нас с: Mar 2016
Сообщение: #7
RE: JQuery - команда открытия новой вкладки --- Поиск в сайте
Спасибо огромное! Все работает!!!
28.03.2016 06:20:26
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru