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

Question

[Genri_Rus]

Есть форма

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

Есть скрипт с Ajax

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 - id="#sendform", что приводит к отправке в шаблон формы поиска searchform.php с <form id="#sendform"> , но данные почему-то не передаются, в строке браузера httр://мой домен/?s=Поиск

Что я делаю не так ? Заранее спасибо за ответ !

Answer 1

[Игорь Воротнёв]

$('.my-class').keypress(function(eventObject){
  eventObject.preventDefault();
  ..

Давно не писал на js, но вроде так.

Comments

[Genri_Rus]

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

[Игорь Воротнёв]

Genri_Rus, да, описание не совсем очевидное, я так понял что как раз отправка формы вам не нужна была, а нужно было аяксом отправлять. Сорян) Перечитал еще раз, и все таки не понял механику, которую вы пытаетесь построить. Это аналог predictive поиска? Type ahead?

[Genri_Rus]

Игорь Воротнёв, Мне нужно сделать так, чтобы страница перезагрузилась после нажатия 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 не передаются =(

[Игорь Воротнёв]

Genri_Rus, вот теперь точно ничего не понял. Вот совершенно ничего.. :) Две формы зачем? Суть задачи в чем? Зачем перезагружать страницу? Что за записи возвращает ajax и зачем он вообще нужен?

[Genri_Rus]

Игорь Воротнёв, на самом деле форма одна, она находится в 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 страницу поиска

[Игорь Воротнёв]

Genri_Rus, что за сложности такие? зачем? Это html, там форма должна быть по умолчанию. Ничего необычного в том, что там 3 формы - нет. Дизайн разный делается с помощью CSS.

[Genri_Rus]

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

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

[Игорь Воротнёв]

Genri_Rus, зачем вам там аякс так и не понял

[Genri_Rus]

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

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

[Игорь Воротнёв]

Genri_Rus, в какой инпут выводит?

[Genri_Rus]

Игорь Воротнёв, да я уже разобрался )

Вот так все великолепной ищет статьи и отправляет сабмитом:

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

[Игорь Воротнёв]

Genri_Rus, а я так и не понял что вы пытаетесь сделать)

[Genri_Rus]

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

Если вас устраивает вызов стандартного шаблона (меня просто не устраивает данный вариант) методом get_search_form() на сайте, то данный код вам не нужен )

[Игорь Воротнёв]

Genri_Rus,

данный код нужен только для динамического поиска и вывода статей из БД без перезагрузки страницы

Вы уже несколько раз писали в том или ином виде эту фразу, но не отреагировали на мой вопрос о predictive search. Дело в том, что под ваше описание попадает 2 разных формата вывода:

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

Соответственно, каждый из этих форматов решается по-разному. И да, по уму оно решается вообще без использования формы поиска, разумнее делать ajax-запросы на свой обработчик или же на REST API.

[Genri_Rus]

Игорь Воротнёв,

И да, по уму оно решается вообще без использования формы поиска

А что тогда предложите ?
Писать свой ajax обработчик, когда в Wordpress есть admin-ajax.php ?
Я гуглил и нашел только такой приемлемый вариант )

[Игорь Воротнёв]

Genri_Rus, так вы снова не уточнили, что же вы пытаетесь сделать:

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

Плясать надо отсюда :)

Писать свой ajax обработчик, когда в Wordpress есть admin-ajax.php ?

Под обработчиком здесь имеется в виду коллбек, который вешается на хуки wp_ajax_* и wp_ajax_nopriv_*, то есть как раз использует АПИ, предоставляемое admin-ajax.php. И вот здесь как раз самое основное - для того, чтобы на этот обработчик (коллбек) отправить запрос и получить ответ, форма не обязательна. И уж тем более стандартная форма поиска - точно не нужна. Стандартная форма поиска используется исключительно для простого поиска с перезагрузкой страницы, поскольку она отправляет данные методом GET, а далее в стандартном цикле жизни WP (процесс загрузки и работы движка) есть конкретные этапы, где отрабатывается контекст is_search. То есть, стандартная форма поиска в WP рассчитана на определенный формат работы, и он вам не подходит. Поэтому, чтобы грубо и брутально не хакать это поведение, разумнее просто сделать свой input (с формой или без - это уже субъективщина), при вводе данных отправлять ajax-запрос на свой коллбек и получать данные в том виде и формате, в котором они вам наиболее удобны. Второй вариант - не использовать admin-ajax.php, а использовать REST API. Оно работает быстрее, чем admin-ajax.php, ваш javascript-код будет проще и легче, АПИ возвращает данные в JSON, который очень удобно интегрировать в DOM.

[Genri_Rus]

Игорь Воротнёв, очень интересная задумка )
Может есть примерная ссылка на статью, где это кто-то так реализует с формами для Wordpress ?

Был был очень рад почитать, просто в видеоуроках на ютубе я про данную тему практически ничего не нашел :(

Answer 2

[id_dmitriy]

а когда это $_POST начал передаваться в строке url ?))
google -> wp-kama ajax

Comments

[Genri_Rus]

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

Answer 3

[Ян Александров]

Вы не пробовали в скрипте вместо my-class, написать, как в разметке: myclass?

Comments

[Genri_Rus]

Нет, у меня там совсем другие классы
Я просто тут их не указывал )

P.S. А так я проблему уже решил