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.

9 bình luận cho “Tìm kiếm theo kiểu live search autocomplete cho WordPress

    1. Ờ, mấy cái này chỉ dành cho người thích code và mới tập code, còn người bình thường thì dùng plugin vẫn tốt hơn 🙂

      1. Dễ gì quên được Tịnh Nguyễn ha Tuấn Lê, nhớ lúc mới mần xong cái Hocban.vn thì Tuấn Lê vào comment đầu tiên mà :v.

        À, không liên quan, dạo này còn bác Cường với bác Đạt (truyenhot.vn) tương tác với em nhiều nhất :v | Còn lại đa phần anh em đã bỏ cuộc chơi, nhấn vào link không còn blog nữa 🙁

        1. Cảm thấy đuối sức trên đường dài, hơn 10 năm viết blog mà thành quả thu lại không được nhiều, bạn bè không còn bao nhiêu, dần cảm thấy cô độc khi tự viết, tự đọc hay còn gọi là tự sướng 😀

  1. Chào cách anh/ chị/ các bạn!
    Mình bị lỗi font chữ khi truy cập vào phần quản trị wordpress để viết bài. Phiền anh/chị/các bạn ai hiểu biết thì tư vấn giúp mình khắc phục vấn đề này với nhé. Mình cảm ơn cả nhà rất nhiều

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *