Hướng dẫn tạo placeholder chữ chạy cho khung tìm kiếm wordpress

08/11/2022 - 133

Hướng dẫn tạo chữ chạy (placeholder) khung tìm kiếm (search) cho website đơn giản nhất, thích hợp để áp dụng cho các trang website bán hàng.

Các bạn có thể làm theo hướng dẫn bên dưới

Đầu tiên các bạn viết Script như sau đặt trước thẻ đóng </body> của template

jQuery("document").ready(function($){
    ! function(t) {
        "use strict";
        t.fn.placeholderTypewriter = function(e) {
            var n = t.extend({
                delay: 50,
                pause: 1e3,
                text: []
            }, e);

            function r(t, e) {
                t.attr("placeholder", ""),
                    function t(e, r, u, a) {
                        var i = n.text[r],
                            o = e.attr("placeholder");
                        if (e.attr("placeholder", o + i[u]), u < i.length - 1) return setTimeout(function() { t(e, r, u + 1, a) }, n.delay), !0; a() }(t, e, 0, function() { setTimeout(function() { ! function t(e, r) { var u = e.attr("placeholder"), a = u.length; if (e.attr("placeholder", u.substr(0, a - 1)), a > 1) return setTimeout(function() {
                                    t(e, r)
                                }, n.delay), !0;
                                r()
                            }(t, function() {
                                r(t, (e + 1) % n.text.length)
                            })
                        }, n.pause)
                    })
            }
            return this.each(function() {
                r(t(this), 0)
            })
        }
    }(jQuery);

    var placeholderText = ['bất động sản', 'mỹ phẩm', 'thời trang', 'nội thất', 'nhà hàng', 'thực phẩm', 'xây dựng', 'bán hàng'];
    $('.search-field').placeholderTypewriter({
        text: placeholderText
    });
  });

Trong đó search-field là “class” của khung search

Nếu là class $(‘.search-field‘), tương tự với id sẽ là $(‘#search-field‘)

Ví dụ thẻ input đang có class là search-field : <input type=”search” class=”search-field”>

Bạn có thể xem demo ở phần tìm kiếm trên trang themeflatsome.net

Chúc bạn thành công!