jQuery Autocomplete funktioniert nicht mit wp_localize_script

Hintergrund: Ich baue ein Autovervollständigungs-Suchfeld für eine Liste von Trades (eine benutzerdefinierte Taxonomie). Ich habe diese Frage gestellt und sehr hilfreich verstanden, wie WordPress und AJAX zusammenarbeiten (Danke, GM)! Er sagte jedoch, dass ich wp_localize_script verwenden wp_localize_script damit das PHP nicht auf dem Front-End zugänglich ist. Ich wusste von dieser function, aber ich hatte sie nie benutzt, so dass ich mit etwas Widerwillen feststeckte.

Ich fand diesen Beitrag, der auch eine unglaublich nützliche Erklärung dafür hatte, wie WordPress und AJAX zusammenarbeiten. Ich habe den von Stephen Harris bereitgestellten Code implementiert, aber ich habe einen Fehler in meiner Konsole, wenn ich nach etwas in der Suchleiste suche:

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

und hier ist mein PHP-Code:

 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' ); 

und 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" }); }); 

Weiß jemand, warum ich diesen Fehler bekomme? Das JavaScript wird ordnungsgemäß geladen. Es fügt das Markup für die Liste der Vorschläge hinzu, ist jedoch leer. Außerdem habe ich festgestellt, dass, wenn ich nach etwas im Eingabefeld suche, eine class, ui-autocomplete-loading dem Eingabefeld hinzugefügt wird. Nicht sicher, ob das wichtig ist, aber es könnte jemandem helfen.

Danke für jede Hilfe 🙂

Solutions Collecting From Web of "jQuery Autocomplete funktioniert nicht mit wp_localize_script"

Wenn Sie dem zweiten Ansatz im verknüpften Q \ A folgen, benötigen Sie keinen Ajax, sondern nur das Array von Termen an das Skript.

Zuallererst in Ihrer functions.php (oder gleichwertig) reihen Sie das Skript ein und übergeben Sie das Array von Trades über 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' ) ) ) ) ); }); 

Jetzt sollte die Datei autocomplete.js Folgendes enthalten:

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

Anmerkungen

  • Es ist wichtig zu prüfen, ob die Seite die Form enthält, weil sonst die Skripte (jquery, jquery-form, json2, jquery-ui-autocomplete und Ihre autocomplete.js) auf jeder Seite hinzugefügt werden , und get_terms wird auch immer aufgerufen werden, verlangsamen das Laden der Seite, also sicher sein, das Skript nur bei Bedarf zu verwenden.

  • Im Code über der autocomplete.js enthalten nur 5 Zeilen Code, und es lohnt sich nicht, eine zusätzliche Datei nur dafür zu erstellen, wenn Sie eine Javascript-Datei haben, die Sie auf allen Seiten laden (oder die auf der Seite geladen ist, wo Sie brauchen die Autovervollständigung) den Code dort, nur darauf achten, das Handle (erstes Argument) für wp_localize_script .

  • Das erste Code-Snippet verwendet eine anonyme function (Closure), also PHP 5.3+.

Sie müssen diesen Teil nicht tun $tradesList = '["' . implode( '","', $trades ) . '"]'; json_encode konvertiert das Array in json.

BEARBEITEN:

PHP-Code

 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" }); 

});