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