Tìm kiếm theo kiểu live search autocomplete cho WordPress

Nếu bạn đang tìm cách để làm search autocomplete, live search tự gợi ý kết quả bên dưới khung tìm kiếm thì có thể tham khảo đoạn code bên dưới.

Giả sử bạn có một khung search của WordPress với code HTML như sau:

<form id="form-search" method="GET" action="http://localhost/aho/">
	<div class="input-group clearfix">
		<input name="s" id="s" class="search form-control" placeholder="Search..." autocomplete="off" title="" required="" type="text">

		<div class="input-group-btn hidden">
			<button type="submit" class="btn btn-primary form-control">
				<i class="fa fa-search"></i>
			</button>
		</div>
	</div>
	<div id="result" class="display-none rs"></div>
</form>

Bạn sẽ tạo một tập tin Javascript và soạn một đoạn mã như bên dưới:

(function ($) {
    (function () {
        var http,
            cache = [],
            textInput = document.getElementById("s"),
            timeout = null,
            results = document.getElementById("result");

        function object() {
            var xmlhttp;

            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            return xmlhttp;
        }

        http = object();

        function process(search) {
            var interval;

            interval = setInterval(function () {
                if (http.responseText != "" || (http.readyState == 4 && http.status == 200)) {
                    results.innerHTML = http.responseText;
                    clearInterval(interval);
                    cache[search] = http.responseText;
                }
            }, 500);
        }

        if ("object" == typeof textInput) {
            textInput.onkeyup = function () {
                var search = this.value;
                livesearch(search);
            };
        } else {
            var interval = setInterval(function () {
                textInput = document.getElementById("s");

                if ("object" == typeof textInput) {
                    textInput.onkeyup = function () {
                        var search = this.value;
                        livesearch(search);
                    };

                    clearInterval(interval);
                }
            }, 1000);
        }

        function livesearch(data) {
            clearTimeout(timeout);

            timeout = setTimeout(function () {
                if (data != "") {
                    if (data in cache) {
                        results.innerHTML = cache[data];
                    } else {
                        http.onreadystatechange = process(data);
                        http.open("GET", hocwpTheme.ajaxUrl + "?action=hocwp_theme_custom_quick_search&data=" + data, true);
                        http.send();
                    }
                } else {
                    results.innerHTML = "";
                }
            }, 400);
        }
    })();
})(jQuery);

Và một đoạn mã PHP để sử lý action, lấy kết quả tìm kiếm theo từ khóa:

function hocwp_theme_custom_quick_search_ajax_callback() {
	$data = isset( $_GET['data'] ) ? $_GET['data'] : '';

	if ( ! empty( $data ) ) {
		$tr_name   = 'hocwp_theme_custom_search_cache';
		$transient = get_transient( $tr_name );
		$transient = (array) $transient;

		$key = md5( $data );

		if ( isset( $transient[ $key ] ) ) {
			echo $transient[ $key ];
		} else {
			$args = array(
				's'         => $data,
				'post_type' => 'post',
				'orderby'   => 'post_title',
				'order'     => 'asc'
			);

			if ( is_numeric( $data ) ) {
				$args = array(
					'post_type' => 'post',
					'p'         => $data
				);
			} elseif ( hocwp_theme_custom_is_japanese( $data ) ) {
				$args['meta_query'] = array(
					array(
						'key'     => 'jp_name',
						'value'   => $data,
						'compare' => 'LIKE'
					)
				);

				unset( $args['s'] );
			}

			$query = new WP_Query( $args );

			if ( $query->have_posts() ) {
				ob_start();
				echo '<style>.show:hover{background:#FF7F50;color:#FFF}</style>';

				foreach ( $query->posts as $post ) {
					?>
					<a href="<?php echo get_permalink( $post ); ?>">
						<div class="show" style="padding:10px;border-bottom:1px #999 dashed" align="left">
							<span class="name" style="font-size:12px"><?php echo $post->post_title; ?></span>
						</div>
					</a>
					<?php
				}

				$html = ob_get_clean();

				$transient[ $key ] = $html;
				set_transient( $tr_name, $transient );
				echo $html;
			}
		}
	}

	exit;
}

add_action( 'wp_ajax_hocwp_theme_custom_quick_search', 'hocwp_theme_custom_quick_search_ajax_callback' );
add_action( 'wp_ajax_nopriv_hocwp_theme_custom_quick_search', 'hocwp_theme_custom_quick_search_ajax_callback' );

Tới đây thì vẫn chưa xong nhé, bạn cần phải viết code CSS để định dạng cho khung search và kết quả trả về.

Bên trong các đoạn code trên sẽ có những chỗ bạn không thể dùng luôn được mà phải chỉnh sửa lại cho phù hợp với code của bạn. Mục đích của bài viết này là để tham khảo chứ không thể cóp dán là chạy được. Chúc bạn thành công.