{"id":110,"date":"2026-09-17T07:06:37","date_gmt":"2026-09-17T07:06:37","guid":{"rendered":"https:\/\/chenteik.com\/?page_id=110"},"modified":"2026-09-19T06:54:59","modified_gmt":"2026-09-19T06:54:59","slug":"sales","status":"publish","type":"page","link":"https:\/\/chenteik.com\/index.php\/sales\/","title":{"rendered":"Sales"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"110\" class=\"elementor elementor-110\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c2dfed8 e-flex e-con-boxed e-con e-parent\" data-id=\"c2dfed8\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e6b57c1 elementor-widget elementor-widget-html\" data-id=\"e6b57c1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n  <title>Pure JS Custom Filter System<\/title>\r\n  <style>\r\n    \/* =========================================================\r\n       CSS STYLING & RESPONSIVE LAYOUT\r\n       ========================================================= *\/\r\n:root {\r\n    \/* ===== Backgrounds ===== *\/\r\n    --bg-color: #15100d;\r\n    --card-bg: #241914;\r\n    --card-hover: #2f211a;\r\n\r\n    \/* ===== Borders ===== *\/\r\n    --card-border: #49352a;\r\n    --border-light: #5c4435;\r\n\r\n    \/* ===== Brand \/ Accent ===== *\/\r\n    --primary: #e8893d;\r\n    --primary-hover: #f3a45f;\r\n    --primary-dark: #b95f24;\r\n\r\n    \/* ===== Text ===== *\/\r\n    --text-main: #fff7ed;\r\n    --text-muted: #c8b8ad;\r\n    --text-dim: #97877d;\r\n\r\n    \/* ===== Utility ===== *\/\r\n    --success: #7fb069;\r\n    --danger: #d96b5f;\r\n\r\n    \/* ===== Shape ===== *\/\r\n    --radius: 12px;\r\n\r\n    \/* ===== Font ===== *\/\r\n    --font: system-ui, -apple-system, BlinkMacSystemFont,\r\n            \"Segoe UI\", Roboto, sans-serif;\r\n}\r\n\r\n* {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\nbody {\r\n    background-color: var(--bg-color) !important;\r\n    color: var(--text-main) !important;\r\n    font-family: var(--font);\r\n    padding: 30px 20px;\r\n    min-height: 100vh;\r\n}\r\n\r\n.container {\r\n    max-width: 1100px;\r\n    margin: 0 auto;\r\n}\r\n\r\nheader {\r\n    text-align: center;\r\n    margin-bottom: 30px;\r\n}\r\n\r\nheader h1 {\r\n    font-size: 2rem;\r\n    font-weight: 700;\r\n    color: var(--text-main) !important;\r\n    margin-bottom: 8px;\r\n}\r\n\r\nheader p {\r\n    color: var(--text-muted) !important;\r\n    font-size: 0.95rem;\r\n}\r\n\r\n\/* Filter Controls Bar *\/\r\n.filter-panel {\r\n    background: var(--card-bg) !important;\r\n    border: 1px solid var(--card-border) !important;\r\n    border-radius: var(--radius);\r\n    padding: 24px;\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\r\n    gap: 20px;\r\n    margin-bottom: 30px;\r\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3) !important;\r\n}\r\n\r\n.control-group {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 8px;\r\n}\r\n\r\n.control-group label {\r\n    font-size: 0.85rem;\r\n    font-weight: 600;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n    color: var(--text-muted) !important;\r\n}\r\n\r\n.control-group input[type=\"text\"],\r\n.control-group select {\r\n    width: 100%;\r\n    background: #0f172a !important;\r\n    border: 1px solid var(--card-border) !important;\r\n    color: var(--text-main) !important;\r\n    padding: 10px 14px;\r\n    border-radius: 8px;\r\n    font-size: 0.95rem;\r\n    outline: none;\r\n    transition: border-color 0.2s;\r\n}\r\n\r\n.control-group input[type=\"text\"]:focus,\r\n.control-group select:focus {\r\n    border-color: var(--primary) !important;\r\n}\r\n\r\n\/* Range Slider *\/\r\n.price-value-tag {\r\n    font-weight: 700;\r\n    color: var(--primary) !important;\r\n    margin-left: 6px;\r\n}\r\n\r\n.control-group input[type=\"range\"] {\r\n    accent-color: var(--primary) !important;\r\n    cursor: pointer;\r\n    margin-top: 8px;\r\n}\r\n\r\n\/* Reset Button *\/\r\n.btn-reset {\r\n    align-self: flex-end;\r\n    background: #334155 !important;\r\n    color: var(--text-main) !important;\r\n    border: none !important;\r\n    padding: 11px 18px;\r\n    border-radius: 8px;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    transition: background 0.2s;\r\n    height: 44px;\r\n}\r\n\r\n.btn-reset:hover {\r\n    background: #475569 !important;\r\n}\r\n\r\n\/* Live Counter *\/\r\n.results-meta {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 20px;\r\n    padding: 0 4px;\r\n    color: var(--text-muted) !important;\r\n    font-size: 0.9rem;\r\n}\r\n\r\n\/* Item Grid *\/\r\n.grid-container {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n    gap: 20px;\r\n}\r\n\r\n\/* Listing Card *\/\r\n.item-card {\r\n    background: var(--card-bg) !important;\r\n    border: 1px solid var(--card-border) !important;\r\n    border-radius: var(--radius);\r\n    padding: 20px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;\r\n}\r\n\r\n.item-card:hover {\r\n    transform: translateY(-4px);\r\n    border-color: var(--primary) !important;\r\n    box-shadow: 0 12px 20px -6px rgba(0, 0, 0, 0.4) !important;\r\n}\r\n\r\n.card-badge {\r\n    display: inline-block;\r\n    align-self: flex-start;\r\n    background: rgba(56, 189, 248, 0.15) !important;\r\n    color: var(--primary) !important;\r\n    font-size: 0.75rem;\r\n    font-weight: 600;\r\n    padding: 4px 10px;\r\n    border-radius: 20px;\r\n    text-transform: uppercase;\r\n    margin-bottom: 12px;\r\n}\r\n\r\n.card-image {\r\n    width: 100% !important;\r\n    height: 200px !important;\r\n    max-height: 200px !important;\r\n    object-fit: cover !important;\r\n    border-radius: 8px;\r\n    margin-bottom: 16px;\r\n    display: block !important;\r\n}\r\n\r\n.card-title {\r\n    font-size: 1.15rem;\r\n    font-weight: 600;\r\n    margin-bottom: 6px;\r\n    color: var(--text-main) !important;\r\n}\r\n\r\n.card-location {\r\n    color: var(--text-muted) !important;\r\n    font-size: 0.85rem;\r\n    margin-bottom: 16px;\r\n}\r\n\r\n.card-bottom {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;\r\n    padding-top: 14px;\r\n    margin-top: 10px;\r\n}\r\n\r\n.card-price {\r\n    font-size: 1.2rem;\r\n    font-weight: 700;\r\n    color: #f7f4f0 !important;\r\n}\r\n\r\n.card-btn {\r\n    background: transparent !important;\r\n    border: 1px solid var(--primary) !important;\r\n    color: var(--primary) !important;\r\n    padding: 6px 14px;\r\n    border-radius: 6px;\r\n    font-size: 0.85rem;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    transition: all 0.2s;\r\n}\r\n\r\n.card-btn:hover {\r\n    background: var(--primary) !important;\r\n    color: #0f172a !important;\r\n}\r\n\r\n\/* Empty State *\/\r\n.no-results {\r\n    grid-column: 1 \/ -1;\r\n    text-align: center;\r\n    padding: 50px 20px;\r\n    background: var(--card-bg) !important;\r\n    border-radius: var(--radius);\r\n    border: 1px dashed var(--card-border) !important;\r\n    color: var(--text-muted) !important;\r\n}\r\n\r\n.no-results h3,\r\n.no-results p {\r\n    color: inherit !important;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <div class=\"container\">\r\n   \r\n\r\n    <!-- Filter Control Bar -->\r\n    <div class=\"filter-panel\">\r\n      <!-- 1. Text Search Input -->\r\n      <div class=\"control-group\">\r\n        <label for=\"searchInput\">Search Title or Area<\/label>\r\n        <input type=\"text\" id=\"searchInput\" placeholder=\"e.g. Condo, Mont Kiara...\" autocomplete=\"off\" \/>\r\n      <\/div>\r\n\r\n      <!-- 2. Category Dropdown -->\r\n      <div class=\"control-group\">\r\n        <label for=\"categoryFilter\">Property Type<\/label>\r\n        <select id=\"categoryFilter\">\r\n          <option value=\"all\">All Types<\/option>\r\n          <option value=\"Condominium\">Condominium<\/option>\r\n          <option value=\"Serviced Residence\">Serviced Residence<\/option>\r\n          <option value=\"Landed \/ Terrace\">Landed \/ Terrace<\/option>\r\n          <option value=\"Commercial\">Commercial Suite<\/option>\r\n        <\/select>\r\n      <\/div>\r\n\r\n      <!-- 3. Dynamic Price Slider -->\r\n      <div class=\"control-group\">\r\n        <label for=\"priceRange\">\r\n          Max Budget: <span id=\"priceDisplay\" class=\"price-value-tag\">RM 1,500,000<\/span>\r\n        <\/label>\r\n        <input type=\"range\" id=\"priceRange\" min=\"300000\" max=\"2000000\" step=\"50000\" value=\"1500000\" \/>\r\n      <\/div>\r\n\r\n      <!-- 4. Sorting Control -->\r\n      <div class=\"control-group\">\r\n        <label for=\"sortBy\">Sort By<\/label>\r\n        <select id=\"sortBy\">\r\n          <option value=\"featured\">Featured First<\/option>\r\n          <option value=\"price-asc\">Price: Low to High<\/option>\r\n          <option value=\"price-desc\">Price: High to Low<\/option>\r\n          <option value=\"name-asc\">Title: A to Z<\/option>\r\n        <\/select>\r\n      <\/div>\r\n\r\n      <!-- 5. Reset Trigger -->\r\n      <button id=\"resetBtn\" class=\"btn-reset\" type=\"button\">Reset Filters<\/button>\r\n    <\/div>\r\n\r\n    <!-- Results Status Meta -->\r\n    <div class=\"results-meta\">\r\n      <span id=\"resultsCount\">Showing 6 listings<\/span>\r\n    <\/div>\r\n\r\n    <!-- Cards Output Grid -->\r\n    <div id=\"listingsGrid\" class=\"grid-container\">\r\n      <!-- Cards dynamically inserted by JavaScript -->\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- =========================================================\r\n       JAVASCRIPT FILTERING & DATA LOGIC\r\n       ========================================================= -->\r\n  <script>\r\n    \/\/ 1. DATASET: Sample items array (simulates database output or API)\r\nconst listings = [\r\n\r\n  {\r\n    id: 1,\r\n    title: \"Pavilion Damansara Heights\",\r\n    category: \"Serviced Residence\",\r\n    location: \"Damansara, Kuala Lumpur\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-1.jpg\",\r\n    price: 1450000,\r\n    sale: true,\r\n    rent: false,\r\n    featured: true\r\n  },\r\n\r\n  {\r\n    id: 2,\r\n    title: \"Arcoris Residences\",\r\n    category: \"Condominium\",\r\n    location: \"Mont Kiara, KL\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-2.jpg\",\r\n    price: 880000,\r\n    sale: true,\r\n    rent: false,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 3,\r\n    title: \"Eco Sanctuary Grandeur\",\r\n    category: \"Landed \/ Terrace\",\r\n    location: \"Kota Kemuning, Selangor\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-3.jpg\",\r\n    price: 1250000,\r\n    sale: true,\r\n    rent: false,\r\n    featured: true\r\n  },\r\n\r\n  {\r\n    id: 4,\r\n    title: \"The Fennel Sentul East\",\r\n    category: \"Condominium\",\r\n    location: \"Sentul, Kuala Lumpur\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-4.jpg\",\r\n    price: 590000,\r\n    sale: true,\r\n    rent: false,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 5,\r\n    title: \"KL Trillion Prime Suite\",\r\n    category: \"Commercial\",\r\n    location: \"KLCC, Kuala Lumpur\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-5.jpg\",\r\n    price: 1850000,\r\n    sale: true,\r\n    rent: false,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 6,\r\n    title: \"Horizon Hills Dual Key\",\r\n    category: \"Landed \/ Terrace\",\r\n    location: \"Iskandar Puteri, Johor\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-6.jpg\",\r\n    price: 760000,\r\n    sale: true,\r\n    rent: false,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 7,\r\n    title: \"House 7\",\r\n    category: \"Condominium\",\r\n    location: \"Kuala Lumpur\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-7.jpg\",\r\n    price: 800000,\r\n    sale: true,\r\n    rent: false,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 8,\r\n    title: \"House 8\",\r\n    category: \"Condominium\",\r\n    location: \"Kuala Lumpur\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-8.jpg\",\r\n    price: 850000,\r\n    sale: true,\r\n    rent: false,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 9,\r\n    title: \"House 9\",\r\n    category: \"Landed \/ Terrace\",\r\n    location: \"Selangor\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-9.jpg\",\r\n    price: 900000,\r\n    sale: true,\r\n    rent: false,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 10,\r\n    title: \"House 10\",\r\n    category: \"Serviced Residence\",\r\n    location: \"Kuala Lumpur\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-10.jpg\",\r\n    price: 950000,\r\n    sale: true,\r\n    rent: false,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 11,\r\n    title: \"House 11\",\r\n    category: \"Condominium\",\r\n    location: \"Penang\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-11.jpg\",\r\n    price: 700000,\r\n    sale: true,\r\n    rent: false,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 12,\r\n    title: \"House 12\",\r\n    category: \"Landed \/ Terrace\",\r\n    location: \"Penang\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-12.jpg\",\r\n    price: 850000,\r\n    sale: true,\r\n    rent: false,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 13,\r\n    title: \"House 13\",\r\n    category: \"Serviced Residence\",\r\n    location: \"Kuala Lumpur\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-13.jpg\",\r\n    price: 1100000,\r\n    sale: true,\r\n    rent: false,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 14,\r\n    title: \"House 14\",\r\n    category: \"Condominium\",\r\n    location: \"Selangor\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-14.jpg\",\r\n    price: 780000,\r\n    sale: true,\r\n    rent: false,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 15,\r\n    title: \"House 15\",\r\n    category: \"Landed \/ Terrace\",\r\n    location: \"Johor\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-15.jpg\",\r\n    price: 950000,\r\n    sale: true,\r\n    rent: false,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 16,\r\n    title: \"House 16\",\r\n    category: \"Commercial\",\r\n    location: \"Kuala Lumpur\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-16.jpg\",\r\n    price: 1300000,\r\n    sale: true,\r\n    rent: false,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 17,\r\n    title: \"House 17\",\r\n    category: \"Condominium\",\r\n    location: \"Penang\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-17.jpg\",\r\n    price: 680000,\r\n    sale: true,\r\n    rent: false,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 18,\r\n    title: \"House 18\",\r\n    category: \"Serviced Residence\",\r\n    location: \"Kuala Lumpur\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-18.jpg\",\r\n    price: 1200000,\r\n    sale: false,\r\n    rent: true,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 19,\r\n    title: \"House 19\",\r\n    category: \"Landed \/ Terrace\",\r\n    location: \"Selangor\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-19.jpg\",\r\n    price: 980000,\r\n    sale: false,\r\n    rent: true,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 20,\r\n    title: \"House 20\",\r\n    category: \"Condominium\",\r\n    location: \"Kuala Lumpur\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-20.jpg\",\r\n    price: 760000,\r\n    sale: false,\r\n    rent: true,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 21,\r\n    title: \"House 21\",\r\n    category: \"Serviced Residence\",\r\n    location: \"Penang\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-21.jpg\",\r\n    price: 900000,\r\n    sale: false,\r\n    rent: true,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 22,\r\n    title: \"House 22\",\r\n    category: \"Landed \/ Terrace\",\r\n    location: \"Johor\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-22.jpg\",\r\n    price: 1050000,\r\n    sale: false,\r\n    rent: true,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 23,\r\n    title: \"House 23\",\r\n    category: \"Condominium\",\r\n    location: \"Selangor\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-23.jpg\",\r\n    price: 820000,\r\n    sale: false,\r\n    rent: true,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 24,\r\n    title: \"House 24\",\r\n    category: \"Commercial\",\r\n    location: \"Kuala Lumpur\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-24.jpg\",\r\n    price: 1500000,\r\n    sale: false,\r\n    rent: true,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 25,\r\n    title: \"House 25\",\r\n    category: \"Serviced Residence\",\r\n    location: \"Kuala Lumpur\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-25.jpg\",\r\n    price: 1150000,\r\n    sale: false,\r\n    rent: true,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 26,\r\n    title: \"House 26\",\r\n    category: \"Condominium\",\r\n    location: \"Penang\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-26.jpg\",\r\n    price: 730000,\r\n    sale: false,\r\n    rent: true,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 27,\r\n    title: \"House 27\",\r\n    category: \"Landed \/ Terrace\",\r\n    location: \"Selangor\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-27.jpg\",\r\n    price: 920000,\r\n    sale: false,\r\n    rent: true,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 28,\r\n    title: \"House 28\",\r\n    category: \"Condominium\",\r\n    location: \"Johor\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-28.jpg\",\r\n    price: 790000,\r\n    sale: false,\r\n    rent: true,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 29,\r\n    title: \"House 29\",\r\n    category: \"Serviced Residence\",\r\n    location: \"Kuala Lumpur\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-29.jpg\",\r\n    price: 1250000,\r\n    sale: false,\r\n    rent: true,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 30,\r\n    title: \"House 30\",\r\n    category: \"Landed \/ Terrace\",\r\n    location: \"Penang\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-30.jpg\",\r\n    price: 880000,\r\n    sale: false,\r\n    rent: true,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 31,\r\n    title: \"House 31\",\r\n    category: \"Condominium\",\r\n    location: \"Selangor\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-31.jpg\",\r\n    price: 750000,\r\n    sale: false,\r\n    rent: true,\r\n    featured: false\r\n  },\r\n\r\n\r\n  {\r\n    id: 33,\r\n    title: \"House 33\",\r\n    category: \"Serviced Residence\",\r\n    location: \"Johor\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-33.jpg\",\r\n    price: 1180000,\r\n    sale: false,\r\n    rent: true,\r\n    featured: false\r\n  },\r\n\r\n  {\r\n    id: 34,\r\n    title: \"House 34\",\r\n    category: \"Landed \/ Terrace\",\r\n    location: \"Penang\",\r\n    image: \"https:\/\/chenteik.com\/wp-content\/uploads\/2026\/09\/house-34.jpg\",\r\n    price: 990000,\r\n    sale: false,\r\n    rent: true,\r\n    featured: false\r\n  }\r\n\r\n];\r\n\r\n\r\n    \/\/ 2. DOM ELEMENT REFERENCES\r\n    const searchInput = document.getElementById(\"searchInput\");\r\n    const categoryFilter = document.getElementById(\"categoryFilter\");\r\n    const priceRange = document.getElementById(\"priceRange\");\r\n    const priceDisplay = document.getElementById(\"priceDisplay\");\r\n    const sortBy = document.getElementById(\"sortBy\");\r\n    const resetBtn = document.getElementById(\"resetBtn\");\r\n    const listingsGrid = document.getElementById(\"listingsGrid\");\r\n    const resultsCount = document.getElementById(\"resultsCount\");\r\n\r\n    \/\/ 3. CURRENCY FORMAT HELPER\r\n    function formatCurrency(amount) {\r\n      return \"RM \" + amount.toLocaleString(\"en-MY\");\r\n    }\r\n\r\n    \/\/ 4. RENDER FUNCTION\r\n    function renderListings(items) {\r\n      listingsGrid.innerHTML = \"\";\r\n\r\n      if (items.length === 0) {\r\n        listingsGrid.innerHTML = `\r\n          <div class=\"no-results\">\r\n            <h3>No matching listings found<\/h3>\r\n            <p>Try adjusting your keyword, expanding your price range, or selecting all categories.<\/p>\r\n          <\/div>\r\n        `;\r\n        resultsCount.textContent = \"0 listings found\";\r\n        return;\r\n      }\r\n\r\n      resultsCount.textContent = `Showing ${items.length} of ${listings.length} listings`;\r\n\r\n      const cardsHtml = items\r\n        .map(\r\n          item => `\r\n          <div class=\"item-card\">\r\n              <img decoding=\"async\" \r\n                    src=\"${item.image}\" \r\n                    alt=\"${item.title}\" \r\n                    class=\"card-image\"\r\n                >\r\n            <div>\r\n                <span class=\"card-badge\">${item.category}<\/span> <span class=\"card-badge\"> ${item.sale ? \"For Sale\" : item.rent ? \"For Rent\" : \"\"} <\/span>\r\n\r\n              <span class=\"card-badge\">${item.category}<\/span>\r\n              <h3 class=\"card-title\">${item.title}<\/h3>\r\n              <p class=\"card-location\">\ud83d\udccd ${item.location}<\/p>\r\n            <\/div>\r\n            <div class=\"card-bottom\">\r\n              <span class=\"card-price\">${formatCurrency(item.price)}<\/span>\r\n                <button \r\n                class=\"card-btn\" \r\n                onclick=\"window.open('https:\/\/wa.me\/60124820649?text=Hi%2C%20I%20am%20interested%20in%20${encodeURIComponent(item.title)}', '_blank')\"\r\n                >\r\n                Inquire\r\n                <\/button>\r\n            <\/div>\r\n          <\/div>\r\n        `\r\n        )\r\n        .join(\"\");\r\n\r\n      listingsGrid.innerHTML = cardsHtml;\r\n    }\r\n\r\n    \/\/ 5. CORE FILTER & SORT ENGINE\r\n    function filterAndSort() {\r\n      const keyword = searchInput.value.trim().toLowerCase();\r\n      const selectedCategory = categoryFilter.value;\r\n      const maxPrice = Number(priceRange.value);\r\n      const selectedSort = sortBy.value;\r\n\r\n      \/\/ Update Slider Label Live\r\n      priceDisplay.textContent = formatCurrency(maxPrice);\r\n\r\n      \/\/ Multi-Condition Filter\r\n      let filtered = listings.filter(item => {\r\n        \/\/ Condition A: Keyword match (title or location)\r\n        const matchesKeyword =\r\n          item.title.toLowerCase().includes(keyword) ||\r\n          item.location.toLowerCase().includes(keyword);\r\n\r\n        \/\/ Condition B: Category match\r\n        const matchesCategory =\r\n          selectedCategory === \"all\" || item.category === selectedCategory;\r\n\r\n        \/\/ Condition C: Price range constraint\r\n        const matchesPrice = item.price <= maxPrice;\r\n\r\n        return matchesKeyword && matchesCategory && matchesPrice;\r\n      });\r\n\r\n      \/\/ Sorting Logic\r\n      if (selectedSort === \"price-asc\") {\r\n        filtered.sort((a, b) => a.price - b.price);\r\n      } else if (selectedSort === \"price-desc\") {\r\n        filtered.sort((a, b) => b.price - a.price);\r\n      } else if (selectedSort === \"name-asc\") {\r\n        filtered.sort((a, b) => a.title.localeCompare(b.title));\r\n      } else if (selectedSort === \"featured\") {\r\n        filtered.sort((a, b) => (b.featured === true ? 1 : 0) - (a.featured === true ? 1 : 0));\r\n      }\r\n\r\n      renderListings(filtered);\r\n    }\r\n\r\n    \/\/ 6. EVENT LISTENERS\r\n    searchInput.addEventListener(\"input\", filterAndSort);\r\n    categoryFilter.addEventListener(\"change\", filterAndSort);\r\n    priceRange.addEventListener(\"input\", filterAndSort);\r\n    sortBy.addEventListener(\"change\", filterAndSort);\r\n\r\n    \/\/ Reset All Inputs\r\n    resetBtn.addEventListener(\"click\", () => {\r\n      searchInput.value = \"\";\r\n      categoryFilter.value = \"all\";\r\n      priceRange.value = 1500000;\r\n      sortBy.value = \"featured\";\r\n      filterAndSort();\r\n    });\r\n\r\n    \/\/ 7. INITIAL RENDER\r\n    filterAndSort();\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pure JS Custom Filter System Search Title or Area Property Type All TypesCondominiumServiced ResidenceLanded \/ TerraceCommercial Suite Max Budget: RM [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-110","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/chenteik.com\/index.php\/wp-json\/wp\/v2\/pages\/110","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chenteik.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chenteik.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chenteik.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chenteik.com\/index.php\/wp-json\/wp\/v2\/comments?post=110"}],"version-history":[{"count":19,"href":"https:\/\/chenteik.com\/index.php\/wp-json\/wp\/v2\/pages\/110\/revisions"}],"predecessor-version":[{"id":187,"href":"https:\/\/chenteik.com\/index.php\/wp-json\/wp\/v2\/pages\/110\/revisions\/187"}],"wp:attachment":[{"href":"https:\/\/chenteik.com\/index.php\/wp-json\/wp\/v2\/media?parent=110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}