Jquery tự động hoàn thành WordPress

Hướng dẫn này hoàn toàn dành cho người mới bắt đầu có chứa mã nguồn demo, giải thích dài dòng. Cuối cùng, bạn sẽ có thể viết một Plugin WordPress có thể tải dữ liệu từ bảng cơ sở dữ liệu tùy chỉnh và dùng nó làm nguồn dữ liệu. Nếu bạn học nhanh hơn bằng cách đọc mã nguồn, vui lòng truy cập vào kho lưu trữ github của tôi

Trong bài viết này, tôi sẽ đề cập đến các chủ đề dưới đây

1. Bảng cơ sở dữ liệu tùy chỉnh WordPress
2. Enqueue hoặc tải các tập lệnh cần thiết (js)
3. hộp văn bản tự động hoàn thành

Bắt đầu

Trước khi chúng ta đi sâu vào chi tiết, đây là một vài điều chúng ta cần làm

1. Tạo một thư mục trong “\wp-content\plugins\” có tên là “ajax-autocomplete”
2. Tạo “ajax-autocomplete. php” bên trong thư mục trên, tệp này phải có tiêu đề bên dưới. Hãy xem tài liệu chính thức này để biết thêm tùy chọn
   

   /*
   * Tên plugin. Tự động điền Ajax
   * URI plugin. https. //www. vndeveloper. com/
   * Mô tả. DEMO WordPress Ajax jQuery tự động hoàn thành hộp văn bản, nguồn dữ liệu từ bảng tùy chỉnh.
   * Phiên bản. 0. 1
   * Tác giả. Hiền Đ. Nguyễn
   * URI tác giả. https. //www. vndeveloper. com/
   * Giấy phép. GPL2+
   */

3. Tôi đề nghị bên dưới cấu trúc thư mục tập tin. Nếu bạn đã có phong cách của mình, hãy tiếp tục sử dụng nó

Bảng cơ sở dữ liệu tùy chỉnh WordPress

Chúng tôi sẽ tạo một tên bảng tùy chỉnh “testing_table” và chèn một số dữ liệu thử nghiệm khi kích hoạt Plugin

register_activation_hook(basename(dirname(__FILE__)). '/'. tên cơ sở( __FILE__ ), 'kích hoạt');
hàm kích hoạt() {
toàn cầu $wpdb;
$charset_collate = $ . ‘wp-admin/bao gồm/nâng cấp. php’);
require_once(ABSPATH . ‘wp-admin/includes/upgrade.php’);

$table = $wpdb->prefix. 'testing_table';
$query = “TẠO BẢNG NẾU KHÔNG TỒN TẠI {$table} (
id INT NOT NULL AUTO_INCREMENT,
name VARCHAR(128),
PRIMARY KEY (id)
)$charset_collate;”;
dbDelta($query);

$wpdb->insert($table, array('name'=>'LogiTech'));
$wpdb->insert($table, array('name'
$wpdb->insert($table, array(‘name’=>’Dell’));
$wpdb->insert($table, array(‘name’=>’Google’));
}

Enqueue hoặc tải các tập lệnh cần thiết (js)

Bạn có thể biết rằng AutoComplete cần jQuery. Bạn cũng có thể nghĩ rằng bạn cần tải xuống các thư viện jQuery và đặt nó vào plugin của mình, sau đó đưa nó vào hàng đợi

Đối với mục đích demo, chúng tôi không có bất kỳ yêu cầu cụ thể nào đối với phiên bản jQuery. Do đó, chúng tôi sẽ sử dụng jQuery “tích hợp sẵn” đi kèm với WordPress. Bạn cũng có thể xem tất cả các tập lệnh hoặc thư viện tích hợp sẵn như backbone, jquery-effects-transfer…tại đây

add_action('wp_enqueue_scripts', 'mysite_js');
function mysite_js() {
$wp_scripts = wp_scripts();
wp_enqueue_script(‘mysitejs’, plugins_url(‘/assets/js/frontend.js’, __FILE__), array(‘jquery’, ‘jquery-ui-core’, ‘jquery-ui-autocomplete’));
wp_localize_script('mysitejs', 'ajax_object', mảng . php’)));

// Kiểu tự động hoàn thành
wp_enqueue_style(‘plugin_name-admin-ui-css’,’http. // ajax. googleapis. com/ajax/libs/jqueryui/'. $wp_scripts->registered[‘jquery-ui-core’]->ver. ‘/theme/flick/jquery-ui. css');

// Nếu plugin của bạn cần phong cách riêng
wp_register_style(‘mysitecss’, plugins_url(‘/assets/css/frontend. css’, __FILE__));
wp_enqueue_style(‘mysitecss’ );
}

Hãy nhớ rằng chúng tôi sẽ cần gửi yêu cầu ajax để truy vấn dữ liệu từ bảng cơ sở dữ liệu tùy chỉnh (testing_table). Đó là lý do tại sao chúng ta cần gọi wp_localize_script để tập lệnh của chúng ta (JavaScript) có thể hiểu được biến “ajax_url”. Về cơ bản, để gửi yêu cầu ajax, chúng tôi gửi yêu cầu POST tới “wp-admin/admin-ajax. php”. Cá nhân tôi thấy bài viết này giải thích hoàn hảo về Ajax cũng như cách nó xử lý việc gửi dữ liệu

Chúng tôi cũng tải “themes/flick/jquery-ui. css” để tạo kiểu cho hộp văn bản tự động hoàn thành của chúng tôi. Bạn có thể tham khảo các phong cách khác tại đây

hộp văn bản tự động hoàn thành

Điều đầu tiên, chúng ta cần một hộp văn bản. Trong hướng dẫn này, chúng tôi sẽ sử dụng mã ngắn có tên là “test-form” để sau này chúng tôi có thể đặt nó vào bất kỳ trang hoặc bài đăng hoặc thậm chí tiện ích nào

add_shortcode('test-form', 'test_form');
function test_form($args, $content=”){
ob_start( . 'bao gồm/biểu mẫu/biểu mẫu kiểm tra. php’);
include(plugin_dir_path(__FILE__) . ‘includes/forms/test-form.php’);
return ob_get_clean();
}

Trong “mẫu thử nghiệm” của chúng tôi. php”, chỉ cần tạo một biểu mẫu có hộp văn bản với thuộc tính “tên” là “thử nghiệm”. Trong JavaScript của chúng tôi, chúng tôi có thể sử dụng thuộc tính này để định vị hộp văn bản đích này

Trong tập lệnh đã tải của chúng tôi (“/assets/js/frontend. js”), có vẻ như thế này

jQuery(tài liệu). sẵn sàng(function($) {
$(‘input[name=testing]’). tự động hoàn thành({
nguồn. hàm(yêu cầu, phản hồi){
$. ajax({
loại. “ĐĂNG”,
url. ajax_object. ajax_url,
dữ liệu. {
hành động. ‘myautocomplete’,
từ khóa. $('đầu vào[tên=kiểm tra]'). val(),
},
thành công. hàm(dữ liệu) {
bảng điều khiển. nhật ký (dữ liệu);
phản hồi (JSON. parse( data ));
},
lỗi. function(errorThrown){
bảng điều khiển. log(errorThrown);
}
})
},
});<
})

Để có thêm lựa chọn, vui lòng xem bài viết này. Bất cứ khi nào người dùng nhập vào, một yêu cầu ajax sẽ được gửi tới (url. ajax_object. ajax_url) là “wp-admin/admin-ajax. php”, thì hành động gọi lại “myautocomplete” sẽ xử lý yêu cầu này và gửi phản hồi

add_action('wp_ajax_nopriv_myautocomplete', 'ajax_autocomplete');
add_action('wp_ajax_myautocomplete', 'ajax_autocomplete');
function ajax_autocomplete() { . ‘testing_table’;
global $wpdb;
$table = $wpdb->prefix . ‘testing_table’;
$results = $wpdb->get_results(“CHỌN tên TỪ ”. $bảng. ” Ở ĐÂU tên THÍCH ‘%”. $_POST[‘từ khóa’]. “%'”);
$items = array();
if (. trống( $results) ) {
foreach ( $results as $result ) {
$items[] = $result->name;
}
}
echo json_encode($items);
die();
}

suy nghĩ cuối cùng

Đó là nó. Chúng tôi đã hoàn thành việc tạo một Plugin WordPress có mã ngắn “mẫu thử nghiệm”. Mã ngắn này chứa một biểu mẫu với một hộp văn bản. Khi người dùng nhập “l”, hộp văn bản này sẽ tải dữ liệu từ bảng tùy chỉnh và đề xuất giá trị có thể