Sử dụng jQuery Autocomplete trong WordPress

WordPress có tích hợp rất nhiều thư viện Javascript. Bạn cần kiểm tra xem script bạn cần dùng đã có đăng ký sẵn trong nhân WordPress hay chưa. Để làm được việc này thì bạn cần kiểm tra qua trang tài liệu hàm wp_enqueue_script.

Bài viết này mình sẽ thảo luận với các bạn đôi chút về handle jquery-ui-autocomplete (jQuery UI Autocomplete) đã được đăng ký sẵn trong nhân WordPress. Mục đích của thư viện này thì cũng giống như tên của nó vậy, bạn có thể sử dụng để viết hiển thị các gợi ý cho một công việc nào đó. Ví dụ như bạn muốn viết live search thì cũng có thể sử dụng cái autocomplete này để gợi ý kết quả cho người dùng.

Về tài liệu hướng dẫn sử dụng thì cũng đã có sẵn trên trang chủ của jQuery UI rồi. Cái bạn tìm hiểu ở đây là một số cách biến tấu và cách viết code PHP trong WordPress như thế nào để trả về kết quả với định dạng như mong muốn.

Bên dưới là đoạn script mẫu trong chức năng tự động gợi ý tags khi bạn gõ phím. Bạn có thể sử dụng để tham khảo cách viết của WordPress.

{
	source: function( request, response ) {
		var term;

		if ( last === request.term ) {
			response( cache );
			return;
		}

		term = getLast( request.term );

		$.get( window.ajaxurl, {
			action: 'ajax-tag-search',
			tax: taxonomy,
			q: term
		} ).always( function() {
			$element.removeClass( 'ui-autocomplete-loading' ); // UI fails to remove this sometimes?
		} ).done( function( data ) {
			var tagName;
			var tags = [];

			if ( data ) {
				data = data.split( '\n' );

				for ( tagName in data ) {
					var id = ++tempID;

					tags.push({
						id: id,
						name: data[tagName]
					});
				}

				cache = tags;
				response( tags );
			} else {
				response( tags );
			}
		} );

		last = request.term;
	},
	focus: function( event, ui ) {
		$element.attr( 'aria-activedescendant', 'wp-tags-autocomplete-' + ui.item.id );

		// Don't empty the input field when using the arrow keys to
		// highlight items. See api.jqueryui.com/autocomplete/#event-focus
		event.preventDefault();
	},
	select: function( event, ui ) {
		var tags = split( $element.val() );
		// Remove the last user input.
		tags.pop();
		// Append the new tag and an empty element to get one more separator at the end.
		tags.push( ui.item.name, '' );

		$element.val( tags.join( separator + ' ' ) );

		if ( $.ui.keyCode.TAB === event.keyCode ) {
			// Audible confirmation message when a tag has been selected.
			window.wp.a11y.speak( window.tagsSuggestL10n.termSelected, 'assertive' );
			event.preventDefault();
		} else if ( $.ui.keyCode.ENTER === event.keyCode ) {
			// Do not close Quick Edit / Bulk Edit
			event.preventDefault();
			event.stopPropagation();
		}

		return false;
	},
	open: function() {
		$element.attr( 'aria-expanded', 'true' );
	},
	close: function() {
		$element.attr( 'aria-expanded', 'false' );
	},
	minLength: 2,
		position: {
	my: 'left top+2',
		at: 'left bottom',
		collision: 'none'
},
	messages: {
		noResults: window.uiAutocompleteL10n.noResults,
			results: function( number ) {
			if ( number > 1 ) {
				return window.uiAutocompleteL10n.manyResults.replace( '%d', number );
			}

			return window.uiAutocompleteL10n.oneResult;
		}
	}
}

Còn bây giờ, bạn sẽ học cách viết PHP như thế nào để trả về kết quả như mong muốn.

function wp_ajax_ajax_tag_search() {
	if ( ! isset( $_GET['tax'] ) ) {
		wp_die( 0 );
	}

	$taxonomy = sanitize_key( $_GET['tax'] );
	$tax      = get_taxonomy( $taxonomy );
	if ( ! $tax ) {
		wp_die( 0 );
	}

	if ( ! current_user_can( $tax->cap->assign_terms ) ) {
		wp_die( -1 );
	}

	$s = wp_unslash( $_GET['q'] );

	$comma = _x( ',', 'tag delimiter' );
	if ( ',' !== $comma ) {
		$s = str_replace( $comma, ',', $s );
	}
	if ( false !== strpos( $s, ',' ) ) {
		$s = explode( ',', $s );
		$s = $s[ count( $s ) - 1 ];
	}
	$s = trim( $s );

	/**
	 * Filters the minimum number of characters required to fire a tag search via Ajax.
	 *
	 * @since 4.0.0
	 *
	 * @param int         $characters The minimum number of characters required. Default 2.
	 * @param WP_Taxonomy $tax        The taxonomy object.
	 * @param string      $s          The search term.
	 */
	$term_search_min_chars = (int) apply_filters( 'term_search_min_chars', 2, $tax, $s );

	/*
	 * Require $term_search_min_chars chars for matching (default: 2)
	 * ensure it's a non-negative, non-zero integer.
	 */
	if ( ( $term_search_min_chars == 0 ) || ( strlen( $s ) < $term_search_min_chars ) ) {
		wp_die();
	}

	$results = get_terms(
		$taxonomy,
		array(
			'name__like' => $s,
			'fields'     => 'names',
			'hide_empty' => false,
		)
	);

	echo join( $results, "\n" );
	wp_die();
}

Chỉ cần xem qua ví dụ chức năng tự động gợi ý tag này của WordPress thì bạn sẽ hiểu được cách viết chức năng load AJAX source cho jQuery Autocomplete như thế nào.

Khi bạn gõ chữ vào ô tag thì khi bạn gõ 2 ký tự trở lên thì WordPress sẽ gợi ý các tag có sẵn cho bạn. Nếu không có kết quả thì bạn sẽ dùng từ đang gõ như là một tag mới.