Как в Wordpress реализовать полноценный поиск через Ajax без тега form?

Игорь Воротнёв, как зачем )

Для того, чтобы вызвать url : '/wp-admin/admin-ajax.php', который ищет в БД статьи и выводит их в input без перезагрузки самой страницы

Как отправить данные с другого input без использования тега form?

Андрей, "у того который в шапке он бесполезен и не нужен" - как раз таки нужен )
У меня wordpress, как только я убираю в name="s" форма вообще не отправляется, т.к. в главной форме searchform.php используется такая форма:

<form id="sendform" action="<?php echo home_url(); ?>/" method="get">
<input class="sidesearch" type="text" name="s" id=search">
</form>

Если у меня в header.php данный input не будет иметь также name-"s" ничего отправляться не будет:

<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="srch">
<button type="submit" value=""></button>

Как в Wordpress реализовать полноценный поиск через Ajax без тега form?

Игорь Воротнёв, вы наверно знаете, что при добавлении одного и того же php get_search_form(); 3 раза и вызове функции Ajax, которая находит статьи без перезагрузки страницы приведет к дублированию во всех 3 input

Поэтому, чтобы такого не было - нужно добавлять новые input со своими индивидуальными значениями

Как отправить данные с другого input без использования тега form?

Андрей, а если мне нужно передать данные не по id input, а по его name="s" ?

Мне для отправки формы, нужен именно данный уникальный name:

<input class="myclass" placeholder="Поиск" type="text" value="" name="s" id="srch">
<button type="submit" value=""></button>

Дело в том, что по данной уникальной букве, в строке браузера поставляются GET следующие данные:

httр://мой домен/?s=текст инпута

Как в Wordpress реализовать полноценный поиск через Ajax без тега form?

Игорь Воротнёв, на самом деле форма одна, она находится в searchform.php, а вот input разные
К примеру у меня на сайте есть поиск в шапке, поиск в виджете, а также в футере

Допустим 2 новых input на сайте я добавил без вызова главной формы get_search_form(), а вот в виджете я захотел запросить стандартную форму через <?php get_search_form(); ?> форма добавляется из searchform.php

А если мне не нужно вызывать эту форму с помощью get_search_form() ?
К примеру я хочу добавить разный дизайн для разных input, где я хочу реализовать поиск

Если вы знаете Wordprees, то наверно помните, что если присвоить input name="s" и добавить для нее тег form, например:

<form>
<input class="myclass" placeholder="Поиск" type="text" value="" name="s" id="myid">
<button type="submit" value=""></button>
<form>

То форма отработает правильно и выполнится Ajax поиск статьи, а также подставятся данные в главную форму, которая находится в searchform.php

А мне нужно, чтобы тег form у меня не был в 2 новых input, т.е. этот тег уже есть в searchform.php, зачем по 100 раз его дублировать
Мне нужно, чтобы в header.php и footer.php было вот так:

<input class="myclass" placeholder="Поиск" type="text" value="" name="s" id="myid">
<button type="submit" value=""></button>

P.S. Как видите, тут форма ищет статьи, но не может их отправить, т.к. нету тега form )

Короче нужно просто подставить из 2 новых введенных пользователем в input данных в главную форму и чтобы она отрабатывала разные GET запросы и отправляла на стандартную в Wordpress страницу поиска

Как отправить данные с другого input без использования тега form?

Андрей, я пробовал так, но может что-то неправильно пишу:

<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="srch">
<button type="submit" value=""></button>

jQuery(document).ready(function($){
  $('.myclass').keyup(function(eventObject){
  console.log("!")
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){    
        if(eventObject.keyCode == 13){
               $("#srch").val();
               $("#sendform").submit();
               return;
         }
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
        success:function(result){
        } });
    } });
});

GET запрос главной формы выполняется, но в нем вот такая вот проблема:
смотрел через Network и в конце есть такая строчка jquery string parameters
s=%D0%9F%D0%BE%D0%B8%D1%81%D0%BA

Как отправить данные с другого input без использования тега form?

Андрей, уже близко, точнее мне примерно нужна именно такая реализация
Только загвоздка вот в чем
Как я писал ранее, у меня эта форма является главным шаблоном для поиска, которая лежит в searchform.php

<form id="sendform" action="<?php echo home_url(); ?>/" method="get">
<input class="sidesearch" type="text" name="myname" id=myid">
</form>

Теперь такой вопрос, у меня в header.php еще есть такая вот форма, но она без тега form, т.к. с тегом form у меня уже есть главная форма в searchform.php

Вот собственно она:

<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="myid">
<button type="submit" value=""></button>

Мне нужно, чтобы данные, которые введет пользователь передавались в главную форму searchform.php и происходила перезагрузка с поисковой выдачей от клиента

if(eventObject.keyCode == 13){
               $("#sendform").submit();
               return;
         }

Я так понял, мне нужно добавить еще id input, которая находится в header.php, чтобы данные с этого input передавались ?

<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="myid">
<button type="submit" value=""></button>

P.S. Ваш вариант также работает, как и мой, но все равно при перезагрузки и вызова главной формы searchform.php, пустой запрос - в браузерной строке вот что: httр://мой домен/?s=%D0%9F%D0%BE%D0%B8%D1%81%D0%BA

Как в Wordpress реализовать полноценный поиск через Ajax без тега form?

Игорь Воротнёв, Мне нужно сделать так, чтобы страница перезагрузилась после нажатия Enter

Суть такова, у меня в header.php есть форма:

<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="myid">
<button type="submit" value=""></button>

Эта форма обрабатывается Ajax и вызывает в action название функции, которая находится в function.php, а она в свою очередь посылает запрос в БД и оттуда вытягивает в input название статьей в зависимости, что запрашивает сам клиент

Вот я дополнил немного код, он перезагружает страницу:

jQuery(document).ready(function($){
  $('.my-class').keypress(function(eventObject){
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
        success:function(result){
        } });
    } });
  $(".my-class").keypress(function(e) {
    var searchTerm = $(this).val();
    if(searchTerm.length > 2 && e.keyCode == 13){
           $("#sendform").submit();
    }
    });
});

Сам шаблон формы лежит в searchform.php, вот что там находится:

<form id="sendform" action="<?php echo home_url(); ?>/" method="get">
<input class="sidesearch" type="text" name="myname" id=myid">
</form>

Как видите я задал форме id="sendform", как бы javascript находит этот id и отправляет данный запрос в главную форму, которая находится в searchform.php
В данном случае Ajax используется для того, чтобы найти статьи, а вот как сделать еще и перезагрузку с сохранением данных, что вводит клиент в input, который связан с главным шаблоном формы ?
Если правильно выразиться, то как вызвать эту самую форму при отправке с разных input ?
Мой выше пример работает, посылает запрос и вызывает главный шаблон, а также перезагружает саму страницу, но вот введенные данные в input не передаются =(

Как в Wordpress реализовать полноценный поиск через Ajax без тега form?

Вы наверно неправильно поняли мой вопрос, нужно не убрать функционал , а улучшить его )
Данная функция убивает всякую отправку формы

Как отправить данные с другого input без использования тега form?

Андрей, да все отправляется и без .on
Мне нужно сделать так, чтобы страница перезагрузилась после нажатия Enter

Вот я дополнил немного код, он перезагружает страницу:

jQuery(document).ready(function($){
  $('.my-class').keypress(function(eventObject){
    var searchTerm = $(this).val();
    if(searchTerm.length > 2){
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
        success:function(result){
        } });
    } });
  $(".my-class").keypress(function(e) {
    var searchTerm = $(this).val();
    if(searchTerm.length > 2 && e.keyCode == 13){
           $("#sendform").submit();
    }
    });
});

Сам шаблон формы лежит в searchform.php, вот что там находится:

<form id="sendform" action="<?php echo home_url(); ?>/" method="get">
<input class="sidesearch" type="text" name="myname" id=myid">
</form>

Как видите я задал форме id="sendform", как бы javascript находит этот id и отправляет данный GET запрос
Ajax находит статьи, а вот как сделать еще и перезагрузку с сохранением данных, что находится в input, который связан с главным шаблоном формы ?
Если правильно выразиться, то как вызвать эту самую форму при отправке с разных input ?
Мой выше пример работает, посылает запрос и вызывает главный шаблон, а также перезагружает саму страницу, но вот введенные данные в input не передаются =(

Как в Wordpress реализовать полноценный поиск через Ajax без тега form?

Вы лучше объясните и покажите как это реализовать, как видите у меня AJAX работает
Только данные не отправляются, изменять в строке url запроса с POST на GET вообще приводит к неправильной работе аякса

Как отправить данные с другого input без использования тега form?

Спасибо за подробный и развернутый ответ !_

<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="myid">
<button type="submit" value=""></button>

У меня ajax вот такой:

jQuery(document).ready(function($){
  $('.myclass').keypress(function(eventObject){
  var searchTerm = $(this).val();
    if(searchTerm.length > 2){
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
});
});

Проблема в том, что пользователь может только искать статьи и выбирать их в самом окне input, но при нажатии на Enter ничего не происходит и не отправляется, т.к. нету тега form
Как только я вставлю тег form пример:

<form>
<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="myid">
<button type="submit" value=""></button>
<form>

Все прекрасно отправляется при нажатии на кнопку Enter

Как отправить данные с другого input без использования тега form?

Андрей, а вот у меня вообще даже в консоли ничего не отображается и ajax не работает =(
Я так понял событие .on призывает к какому-то действию, поэтому у меня поиск не работает
А вот просто .keypress как раз таки к этому не призывает

Мне нужно тогда 2 функции ?
Одна отображает запросы при вводе в input данных без события .on , а другая реагирует на клик ?

Как отправить данные с другого input без использования тега form?

Андрей, я вообще правильно написал или перед function нужно скобку поставить ?

Как отправить данные с другого input без использования тега form?

Stalker_RED, вот пример

<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="myid">
<button type="submit" value=""></button>

jQuery(document).ready(function($){
  $('.myclass').keypress(function(eventObject){
  var searchTerm = $(this).val();
    if(searchTerm.length > 2){
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
});
});

В данном примере ajax ищет запросы статьей в БД, в input вводят какие-то запросы - сервер через ajax отдает их клиенту
'action':'', я специально не указал, т.к. это вызов функции в PHP, которая обрабатывает запросы от клиента

Проблема в том, что пользователь может только искать статьи и выбирать их в самом окне input, но при нажатии на Enter ничего не происходит, т.к. нету тега form
Как только я вставлю тег form пример:

<form>
<input class="myclass" placeholder="Поиск" type="text" value="" name="myname" id="myid">
<button type="submit" value=""></button>
<form>

Все прекрасно отправляется при нажатии на кнопку
Вот у меня и возник вопрос, как можно отправить данные, если есть один главный шаблон формы поиска, а вот скажем input поиска на странице не один, а несколько
Постоянно писать тег form, form и каждый раз обращаться к главной форме ну такое себе =(

Как отправить данные с другого input без использования тега form?

Андрей, у меня так ничего не работает

jQuery(document).ready(function($){
  $('.myclass').on("keypress", function(eventObject){
  var searchTerm = $(this).val();
    if(searchTerm.length > 2){
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
});
});

Как отправить данные с другого input без использования тега form?

Stalker_RED, я имел ввиду до инициализации ajax данные input нужны
К примеру в функции, используется переменная postForm:

var postForm = {
                    'name'  : $('#name').val(),
					'mail'  : $('#mail').val(),
                    'phone'  : $('#phone').val(),
                    'source'  : $('#source').val(),
                    'medium'  : $('#medium').val(),
                    'campaign'  : $('#campaign').val(),
                    'content'  : $('#content').val(),
                    'term'  : $('#term').val()
                };

Далее уже идет Ajax

Как отправить данные с другого input без использования тега form?

Stalker_RED, мне нужно, чтобы форма отправлялась через Ajax, точнее с помощью Ajax

Вот пример Ajax ищет статьи, но не отправляет их через input с классом .myclass

Мне подсказывают, что нужно использовать $('.my-class').on("keypress")

jQuery(document).ready(function($){
  $('.myclass').keypress(function(eventObject){
  var searchTerm = $(this).val();
    if(searchTerm.length > 2){
      $.ajax({
        url : '/wp-admin/admin-ajax.php',
        type: 'POST',
        data:{
          'action':'',
          'term'  :searchTerm
        },
});
});

Как отправить данные с другого input без использования тега form?

А если у меня уже есть ajax и есть событие keypress ?
Именно

jQuery(document).ready(function($){
	$('.myclass').keypress(function(eventObject){
  var searchTerm = $(this).val();
		if(searchTerm.length > 2){
			$.ajax({
				url : '/wp-admin/admin-ajax.php',
				type: 'POST',
				data:{
					'action':'',
					'term'  :searchTerm
				},
});
});

Ajax ищет статьи в БД и показывает их в моем input, но сам input и кнопка не могут отправить данные при нажатии на Enter =(

Как отправить данные с другого input без использования тега form?

А при помощи javascript нельзя ?

Я знаю, что многие используют типа таких проверок:

<input id="myid" value="" type="text" name="myname" placeholder="Я ищу...">
<a class="search_go" onclick="myfunction();"></a>

$('#myid').on("keypress", function (e) {
        if ($('#myid').val().length>0 && e.keyCode == 13) {
            myfunction();
            return false;
        }