Intereting Posts
Почему страница пользовательского таксономического архива перенаправляет меня на один пост? Sharethis социальная доля счета retirve при изменении домена Как я могу получить WP для создания фида на основе нескольких таксономических условий Какой многоязычный вариант для WordPress лучше всего подходит для SEO и Woocommerce? Проверьте, находится ли конкретный пользователь в сети вне wp С двумя настраиваемыми типами сообщений, как сделать одного ребенка другого в меню администратора? Иерархия шаблонов WordPress Использование инструкции if на странице настройки темы Изменить заголовок, загруженный jQuery, для использования HTTPS Отключить определенные виджеты на выбранных страницах веб-сайта WordPress? мета-окно на новой странице администратора Возможно ли реализовать веб-приложение adhoc php с wordpress? Функция повторной факторизации пользовательской выписки Условное наложение PNG в пользовательском типе типа сообщения в зависимости от типа сообщения Пользовательский фильтр времени wp_query на meta_value

Автозаполнение jQuery не работает с wp_localize_script

Немного фона: я создаю окно автозаполнения для списка торгов (пользовательская таксономия). Я задал этот вопрос и очень хорошо понял, как WordPress и AJAX работают вместе (спасибо GM)! Однако он сказал, что я должен использовать wp_localize_script чтобы PHP не был доступен в интерфейсе. Я знал об этой функции, но никогда не использовал ее, с небольшим количеством нежелания, за которое я застрял.

Я нашел этот пост, который также имел невероятно полезное объяснение того, как WordPress и AJAX работают вместе. Я реализовал этот код, предоставленный Стивеном Харрисом, но у меня есть ошибка в моей консоли, всякий раз, когда я ищу что-либо в панели поиска:

TypeError: '["Accountants","Electricians","Painters","Plumbers"]' is not a valid argument for 'in' (evaluating 'b-1 in a')

и вот мой PHP-код:

 wp_enqueue_script("autocomplete", get_template_directory_uri() . '/assets/js/autocomplete.js', array( 'jquery', 'jquery-form', 'json2' ), false, true ); wp_localize_script("autocomplete", "MyAjax_object", array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'myajax_nonce' => wp_create_nonce( 'myajax_nonce_val' ), 'action' => 'myajax-submit' )); function get_my_suggestions() { // This function should query the database and get results as an array of rows: // GET the recieved data: 'term' (what has been typed by the user) $term = $_GET['term']; $trades = get_terms( 'trade', array( 'fields' => 'names' ) ); $tradesList = '["' . implode( '","', $trades ) . '"]'; // echo JSON to page and exit. $response = $_GET["callback"]."(". json_encode($tradesList) .")"; echo $response; exit; } add_action( 'wp_ajax_myajax-submit', 'get_my_suggestions' ); 

и JavaScript:

 $(document).ready(function() { $(".main-search-field").autocomplete({ source: function( request, response ) { jQuery.getJSON( MyAjax_object.ajaxurl + "?callback=?&action=myajax-submit", request, function( data ) { response( jQuery.map( data, function( item ) { jQuery.each( item, function( i, val ) { val.label = val.whatever; // build result for autocomplete from suggestion array data } ); return item; } ) ); } ); }, minLength: 1, appendTo: ".search-container" }); }); 

Кто-нибудь знает, почему я получаю эту ошибку? JavaScript загружается отлично – он добавляет в разметку список предложений, но он пуст. Кроме того, я заметил, что всякий раз, когда я что-то ищу в окне ввода, в поле ввода добавляется класс ui-autocomplete-loading . Не уверен, что это важно, но это может помочь кому-то.

Спасибо за любую помощь 🙂

Если вы следуете второму подходу в связанном Q \ A, вам не нужен ajax, а просто передать массив терминов скрипту.

Прежде всего, в ваших functions.php (или эквиваленте) запустите скрипт и передайте массив торгов через wp_localize_script :

 add_action( 'wp_enqueue_scripts', function() { /* you should check if the page is the one that include the form, you know how, * EG: * * if ( ! is_page( 'my-page-with-form' ) ) return; * */ wp_enqueue_script( 'my-theme-autocomplete', // is better to prefix everything in WP get_template_directory_uri() . '/assets/js/autocomplete.js', // put jquery-ui-autocomplete among dependencies array( 'jquery', 'jquery-form', 'json2', 'jquery-ui-autocomplete' ), NULL, true ); wp_localize_script( 'my-theme-autocomplete', 'MyAjax_object', array( 'all_trades' => implode( ',', get_terms( 'trade', array( 'fields' => 'names' ) ) ) ) ); }); 

Теперь файл autocomplete.js должен содержать:

 jQuery(document).ready( function($) { $( '.main-search-field' ).autocomplete({ source: MyAjax_object.all_trades.split(','), minLength: 1 }); }); 

Заметки

  • Важно проверить, является ли страница той, которая содержит форму, поскольку в противном случае на каждой странице будут добавлены скрипты (jquery, jquery-form, json2, jquery-ui-autocomplete и ваш autocomplete.js), а также get_terms всегда вызываться, замедляя загрузку страницы, поэтому обязательно используйте скрипт только при необходимости.

  • В коде выше autocomplete.js содержит только 5 строк кода и не стоит создавать дополнительный файл только для этого, если у вас есть файл javascript, который вы загружаете на всех страницах (или загружаете на страницу, где вам нужно автозаполнение), wp_localize_script код там, просто не забудьте отрегулировать дескриптор (первый аргумент) для wp_localize_script .

  • Первый фрагмент кода использует анонимную функцию (закрытие), поэтому требуется PHP 5.3+.

Вам не нужно делать эту часть $tradesList = '["' . implode( '","', $trades ) . '"]'; json_encode преобразует массив в json.

РЕДАКТИРОВАТЬ:

PHP-код

 function get_my_suggestions() { // This function should query the database and get results as an array of rows: // GET the recieved data: 'term' (what has been typed by the user) $term = $_GET['term']; $trades = array('gadha', 'chagol', 'patha'); //$tradesList = '["' . implode( '","', $trades ) . '"]'; // echo JSON to page and exit. $response = $_GET["callback"]."(". json_encode($trades) .")"; echo $response; exit; } add_action( 'wp_ajax_myajax-submit', 'get_my_suggestions' ); 

Javascript

 $(document).ready(function() { $(".main-search-field").autocomplete({ source: function( request, response ) { jQuery.getJSON( MyAjax_object.ajaxurl + "?callback=?&action=myajax-submit", request, function( data ) { response( jQuery.map( data, function( item ) { jQuery.each( item, function( i, val ) { val.label = val; // the generated array form get_terms do not have a key so pass val to label } ); return item; } ) ); } ); }, minLength: 1, appendTo: ".search-container" }); 

});