لود نتایج جستوجو در همان صفحه بدون رفرش شدن صفحه

[sajad 731]

سلام 

چطور میشه تو وردپرس کاری کرد که زمانی که کاربر می خواد سرچ کنه بعد از  اینکه عبارت خودش رو میزنه صفحه رفرش نشه و نتایج تو همون صفحه بارگزاری بشه.

میخوام این موضوع رو یاد بگیرم و تمایلی برای استفاده از افزونه برای اینکار ندارم.

ظاهرا این موضوع رو میشه با ajax یا jquery پیاده کرد.

ممنون میشم دوستانی که میتونن راهنمایی کنن 

 

[امیر حسین حبیبی 618]

با سلام و احترام شما با جاوا اسکریپت و php کار کردید ؟ تسلط دارید ؟

 

[Ebrahimzadeh 36]

شما برای این کار احتیاج به یک input برای وارد کردن کلمه جستجو با اسم کلاس مثلا .search_input و یک دکمه که باید نوعش button باشه با اسم کلاس btn_search

در فایل functions.php
 

wp_enqueue_script( 'post-ajax-handle', get_template_directory_uri() . '/search.js', array( 'jquery' ) );

wp_localize_script( 'post-ajax-handle', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );


add_action( 'wp_ajax_search', 'search' );
add_action( 'wp_ajax_nopriv_search', 'search' );
function search(){
 $search_key=$_POST['search_key'];
 query search 
نمایش خروجی
}

و در فایل search.js

jQuery(document).ready(function(){
  jQuery('.search_btn').click(function(){
		var search_key=jQuery('.search_input').val();
        jQuery.post(the_ajax_script.ajaxurl,{action:"search",search_key:search_key},function(response){var   	response=response.substr(0,response.length-1);
              jQuery(".result").html(response);
               
        
    });
  });
});

اسم کلاس result باید در صفحه ای باشد که خروجی سرج در آن نمایش داده میشود در اصل خروجی سرچ در این div قرار میگیرد

[sajad 731]

در 58 دقیقه قبل، Fenix.ir گفته است :

با سلام و احترام شما با جاوا اسکریپت و php کار کردید ؟ تسلط دارید ؟

 

سلام مجدد 

تسلط کامل ندارم ولی میتونم کد ها رو تا حددی درک کنم و اکثر اوقات نتیجه ای که میخوام رو از روی سمپل ها میتونم بهش برسم.

[sajad 731]

در ۱ ساعت قبل، Ebrahimzadeh گفته است :

شما برای این کار احتیاج به یک input برای وارد کردن کلمه جستجو با اسم کلاس مثلا .search_input و یک دکمه که باید نوعش button باشه با اسم کلاس btn_search

در فایل functions.php
 

wp_enqueue_script( 'post-ajax-handle', get_template_directory_uri() . '/search.js', array( 'jquery' ) );

wp_localize_script( 'post-ajax-handle', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );


add_action( 'wp_ajax_search', 'search' );
add_action( 'wp_ajax_nopriv_search', 'search' );
function search(){
 $search_key=$_POST['search_key'];
 query search 
نمایش خروجی
}

و در فایل search.js

jQuery(document).ready(function(){
  jQuery('.search_btn').click(function(){
		var search_key=jQuery('.search_input').val();
        jQuery.post(the_ajax_script.ajaxurl,{action:"search",search_key:search_key},function(response){var   	response=response.substr(0,response.length-1);
              jQuery(".result").html(response);
               
        
    });
  });
});

اسم کلاس result باید در صفحه ای باشد که خروجی سرج در آن نمایش داده میشود در اصل خروجی سرچ در این div قرار میگیرد

ممنون بزرگوار

چند سوال:

۱- سمپلی چیزی تو این زمینه هست که بشه تست کرد؟ یا رفرنسی تخصصی برای این موضوع هست که بشه رفت دنبالش و یاد گرفت و درک کرد که دقیقا این نمونه کد ها چی هستن و چیکار میکنن؟

۲- این نمونه کد داره با استفاده از متد $_post کار خودشو میکنه درسته؟

۳- میشه همین رو با $_get انجام داد یا فقط باید پست باشه؟

۴- این واسه یه فرم جستوجوی تک فیلدی هست و اگه قرار باشه فرم جستوجوی ما چند فیلدی باشه چی ؟

 

 

[Ebrahimzadeh 36]

https://codex.wordpress.org/AJAX_in_Plugins

 

میتونید از چند فیلد بر اساس نیاز استفاده کنید فقط کوئری های که مینویسید متفاوت

[sajad 731]

در در 7/26/2017 at 14:42، Ebrahimzadeh گفته است :

https://codex.wordpress.org/AJAX_in_Plugins

 

میتونید از چند فیلد بر اساس نیاز استفاده کنید فقط کوئری های که مینویسید متفاوت

رفرنس ویدئو و یا فارسی مد نظرم بود ولی به هر حال ممنون 

 

[mani7887 177]

رفرنس ویدئو دقیقا چیه؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟

[asadiy4n 2807]

در 4 ساعت قبل، mani7887 گفته است :

رفرنس ویدئو دقیقا چیه؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟

https://translate.google.com