Autocomplete-Feld mit benutzerdefiniertem Post-Typ auffüllen

Okay, ich habe einen benutzerdefinierten Beitragstyp namens “Videospiele” erstellt. Ich habe auch das Skript für ein Autocomplete-Feld. Ich möchte 2 Dinge tun:

Ich möchte, dass die Quelle das vorgestellte Bild aus dem Postposttyp Video Games und der Titel ist.

Ich muss auch die Antwort speichern, wenn sie darauf klicken, damit ich sie in ihren Profilen aufrufen kann.

Schließlich brauche ich für sie, um so viele Antworten wie möglich auswählen zu können. Wenn mir jemand mit diesen 3 Dingen helfen kann, wäre ich unendlich dankbar! Der Code für das Skript ist unten:

    autocomplete demo         $( "#autocomplete" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });    

Solutions Collecting From Web of "Autocomplete-Feld mit benutzerdefiniertem Post-Typ auffüllen"

Deine Frage ist ziemlich kompliziert, aber lass es uns versuchen!

Ich habe kürzlich einen Kurs gemacht, der genau das tut, was ich gerne teile.

Es ist keine vollständige Antwort, aber wird den größten Teil des Weges dorthin bringen.

Was Sie wissen müssen, ist die schrullige Art und Weise, wie WP Ajax ausführt, was das Registrieren einer Aktion am WordPress Ajax-Endpunkt beinhaltet.

 class YOURCPT_autocomplete { /** * Constructor */ public function __construct() { // add actions on construct add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ), 5 ); // And these two actions are the ajax search actions // we use the hook wp_ajax_{action} to define our ajax action // here we defined the 'search' action // for both logged in and out users // in your case you probably dont need the 'nopriv' hook, for logged out users add_action( 'wp_ajax_search', array( $this, 'ajax_search' ) ); add_action( 'wp_ajax_nopriv_search', array( $this, 'ajax_search' ) ); // in all of the cases above we call a method of this same class: // array( $this, 'your_function_name' ); } /** * Register scripts */ public function enqueue_scripts() { // enqueue JS and CSS. // You will have to change these next two lines to point to your own wp_enqueue_style( 'autocomplete', YOURTHEME_OR_PLUGIN_BASE . '/YOUR.css' ); wp_enqueue_script( 'autocomplete', YOURTHEME_OR_PLUGIN_BASE . '/js/YOUR.js', array( 'jquery-ui-autocomplete' ), 'true', true ); // then we get a reference to the ajax endpoint using wp_localize script // this will create a variable called `opts` which has a member // `ajax_url` which, you guessed, has the ajax url. wp_localize_script( 'autocomplete', 'opts', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) ); } /** * Ajax - this is the function that searches CPTs */ public function ajax_search() { // we send ajax request to ajax_url // check for term, if doesnt exist die if ( empty( $_REQUEST['term'] ) ) { wp_die(); } // WP Query arguments // we get the 'term' from the ajax call, clean it and make a search $args = array( 's' => trim( esc_attr( strip_tags( $_REQUEST['term'] ) ) ), 'post_type' => 'YOURCPT' ); // array to keep results $results = array(); // make a query $query = new WP_Query( $args ); // save results // formatted with the title as 'label' for the autocomplete script if ( $query->have_posts() ) { while ( $query->have_posts() ) { $query->the_post(); $results[] = array( 'label' => esc_html( get_the_title() ), // title 'link' => get_permalink(), // link 'id' => get_the_ID(), // id // and whatever eles you want to send to the front end ); } } // echo results echo json_encode($results); // kill process // all ajax actions in WP need to die when they are done! wp_die(); } } 

Als nächstes ist der JS (wird die CSS überspringen)

 jQuery( function ($) { // create an jq-ui autocomplete on your selected element $( 'WHICHEVER_ELEMENT_WILL_USE_AUTOCOMPLETE' ).autocomplete( { // use a function for its source, which will return ajax response source: function(request, response){ // well use opts.ajax_url which we enqueued with WP $.post( opts.ajax_url, { action: 'search', // our action is called search term: request.term // and we get the term com jq-ui }, function(data) { // when we get data from ajax, we pass it onto jq-ui autocomplete response(data); }, 'json' ); }, // next, is the select behaviour // on select do your action select: function(evt, ui) { evt.preventDefault(); // here you can call another AJAX action to save the option // or whatever }, } ); } ( jQuery ) ); 

Cool! Jetzt erstellen Sie einfach die class in Ihrer funcitons.php, die alles für Sie einreihen wird.

 // include the file where you have your class, if not in your functions.php include( 'path/to/the/class/YOURCPT_autocomplete.php' ); // instantiate the class new YOURCPT_autocomplete(); 

Erledigt!

Sie können diesen letzten Schritt unter bestimmten Bedingungen ausführen und ihn nur in bestimmte Seiten, Beitragstypen usw. einschließen.

Um die ausgewählte Option zu speichern, können Sie eine weitere Ajax-Aktion erstellen, indem Sie die Hooks wie in der obigen class verwenden.

Ihre Bearbeitungsfunktion könnte update_user_meta mit den Begriffen verwenden

Um schließlich mehrere Werte zu verwenden, sollten Sie sich die jQuery-Benutzerdokumentation ansehen. Sie können es definitiv tun: https://jqueryui.com/resources/demos/autocomplete/multiple.html

Ich werde definitiv smashingmag empfehlen, wenn Sie gute Tutorials zu diesen finddly WordPress Features benötigen: https://www.smashingmagazine.com/2011/10/how-to-use-ajax-in-wordpress/

Hoffe, dass du gut angefangen hast!