Como criar um autocomplete com multiselect e ajax para WordPress sem plugin

,




Crie um novo arquivo autocomplete.php em seu diretório de plugins e adicione o seguinte código:

<?php
/**
 * Plugin Name: Autocomplete Example
 * Plugin URI: https://example.com
 * Description: Autocomplete example plugin
 * Version: 1.0.0
 * Author: Your Name
 * Author URI: https://example.com
 */

// função que retorna os resultados da pesquisa
function autocomplete_search() {
  // certifique-se de que o usuário esteja logado e tenha permissão para ler os dados que você precisa

  // obtém o termo de pesquisa
  $term = $_GET['term'];

  // faz a pesquisa no banco de dados e retorna os resultados como um array
  $results = array();
  // substitua este código pelo código real da pesquisa no banco de dados
  for ($i = 1; $i <= 10; $i++) {
    $results[] = array(
      'id' => $i,
      'name' => 'Item ' . $i,
      'value' => 'item-' . $i
    );
  }

  // envia os resultados como um array JSON
  wp_send_json($results);
}
add_action('wp_ajax_autocomplete_search', 'autocomplete_search');
add_action('wp_ajax_nopriv_autocomplete_search', 'autocomplete_search');

function my_autocomplete_scripts() {
  wp_enqueue_script('jquery-ui-autocomplete');
  wp_enqueue_style('jquery-ui-autocomplete');
  wp_enqueue_script('my-autocomplete', get_template_directory_uri() . '/js/my-autocomplete.js', array('jquery'), '1.0.0', true);
  wp_localize_script('my-autocomplete', 'myAutocomplete', array(
    'ajaxUrl' => admin_url('admin-ajax.php')
  ));
}
add_action('wp_enqueue_scripts', 'my_autocomplete_scripts');

Crie um novo arquivo my-autocomplete.js em seu diretório de temas e adicione o seguinte código:

jQuery(function($) {
  // inicializa o campo de busca com autocomplete
  $('#my-autocomplete').autocomplete({
    source: function(request, response) {
      $.ajax({
        url: myAutocomplete.ajaxUrl,
        dataType: 'json',
        data: {
          action: 'autocomplete_search',
          term: request.term
        },
        success: function(data) {
          response($.map(data, function(item) {
            return {
              label: item.name,
              value: item.id
            };
          }));
        }
      });
    },
    select: function(event, ui) {
      // adiciona o item selecionado à lista
      $('#my-autocomplete-values').append('<li data-id="' + ui.item.value + '">' + ui.item.label + ' <a href="#" class="remove">x</a></li>');

      // remove o item da lista de sugestões
      ui.item.value = null;

      // limpa o campo de busca
      $(this).val('');

      // salva o ID selecionado com AJAX
      $.ajax({
        url: myAutocomplete.ajaxUrl,
        type: 'POST',
        dataType: 'json',
        data: {
          action: 'autocomplete_save',
          id: ui.item.value,
          security: myAutocomplete.ajaxNonce
        },
        success: function(data) {
          // exibe uma mensagem de sucesso ou faz outra ação
        },
        error: function(xhr, status, error) {
          // exibe uma mensagem de erro ou faz outra ação
        }
      });

      return false;
    }
  });

  // remove um item da lista de valores selecionados
  $('#my-autocomplete-values').on('click', '.remove', function() {
    $(this).parent().remove();
    return false;
  });
});

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Ativar Timer