Đánh dấu kết quả tìm kiếm dễ dàng với AngularJs Filter

Chức năng đánh dấu (highlighting) kết quả tìm kiếm giúp nâng cao trải nghiệm người dùng, hỗ trợ người sử dụng nhanh chóng tìm ra kết quả mong muốn trong thời gian ngắn nhất.

Chúng ta rất quen thuộc với tính năng này trong hầu hết các tính năng tìm kiếm của trình duyệt, rich text editor hay Google docs. Trong ví dụ này mình sẽ làm một tính năng tương tự sử dụng AngularJs Filter module.

AngularJs Filter cung cấp cho chúng ta chức năng tìm kiếm rất hiệu quả với data được lưu trong $scope. Trong ví dụ này mình sẽ dựa vào tính năng filter sẵn có, sử dụng regular expression để tìm cách map từ khóa tìm kiếm (khi gõ ở textbox) với dữ liệu trong $scope.data, sau đó replace từ khóa đó bằng 1 thẻ span có màu sắc nổi bật.

Đầu tiên các bạn có thể download AngularJs ở nuget hoặc tải ở đính kèm cuối bài viết.

Install-Package AngularJS.Core -Version 1.6.5

Sau khi download xong, các bạn kéo file angular.js vào file index.html. Ta có code như sau

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo AngularJS Highlight Filter</title>
    <style>
        .highlighted {
            background: yellow
        }
    </style>

</head>
<body ng-app="Demo">
    
    <div ng-controller="Demo">
        <label>Enter keyword:</label>
        <br />
        <input type="text" placeholder="Search" ng-model="search.text">
        <hr />
        <!-- filter code -->
        <p ng-repeat="item in data | filter:search.text"
             ng-bind-html="item.text | highlight:search.text">
        </p>
    </div>

    <script src="Scripts/angular.js"></script>
    <script>
        angular.module('Demo', [])
            .controller('Demo', function ($scope) {
                $scope.data = [
                    { text: "Convert HTML to PDF dễ dàng với thư viện Select.Pdf" },
                    { text: "Tìm hiểu về Async và Await trong Asp.Net" },
                    { text: "Tìm hiểu về Ajax Helpers trong Asp.Net MVC" },
                    { text: "Xây dựng Autocomplete Textbox trong Asp.Net MVC với Jquery TypeHead" },
                    { text: "File Upload trong Asp.Net MVC sử dụng DropZone" },
                    { text: "Tìm hiểu những tính năng mới của Javascript trong phiên bản ES6" },
                    { text: "Tạo Date range picker với bootstrap datepicker" },
                    { text: "Một số điểm mới trong bootstrap 4 alpha" }
                ]
            })
            .filter('highlight', function ($sce) {
                return function (text, phrase) {
                    if (phrase) text = text.replace(new RegExp('(' + phrase + ')', 'gi'),
                        '<span class="highlighted">$1</span>')

                    return $sce.trustAsHtml(text)
                }
            })
    </script>
</body>

</html>

 

Ở đoạn code trên, mình tạo 1 mảng dữ liệu giả để làm dữ liệu tìm kiếm (Là dữ liệu các bạn sẽ lấy ra từ API trong project của các bạn sau này), sau đó bind dữ liệu ra với ng-repeat. Sử dụng ngay tính năng filter của AngularJs để thực hiện tìm kiếm trong $scop.data với từ khóa sẽ được nhập vào ở input

 <label>Enter keyword:</label>
        <br />
        <input type="text" placeholder="Search" ng-model="search.text">
        <hr />
        <!-- filter code -->
        <p ng-repeat="item in data | filter:search.text"
             ng-bind-html="item.text | highlight:search.text">
        </p>

 

Sau đó mở rộng filter module để thực hiện thay thế những kết quả giống với từ khóa tìm kiếm với thẻ span có màu sắc.

.filter('highlight', function ($sce) {
                return function (text, phrase) {
                    if (phrase) text = text.replace(new RegExp('(' + phrase + ')', 'gi'),
                        '<span class="highlighted">$1</span>')

                    return $sce.trustAsHtml(text)
                }
            })

 

Ta cũng cần thêm 1 class css để quy định màu sắc cho phần highlight

.highlighted {
            background: yellow
        }

 

Các bạn có thể thấy chỉ với một đoạn code nhỏ nhưng mang lại trải nghiệm người dùng khá hiệu quả, giúp tăng sự tương tác đối với ứng dụng của các bạn.

Các bạn có thể xem demo hoặc download code ví dụ của mình dưới đây

DEMO

 

Download Source

Related Post


Search

Đăng ký nhận bài mới


Category

Blog Archive