🔍Search DOM navbar

Cái search bar trong AdminLTE sidebar này không phải form submit thường, mà được xử lý 100% bằng JavaScript của AdminLTE thông qua data-widget="sidebar-search".

Tôi bóc code gốc + cơ chế hoạt động từng lớp 👇

---

1️⃣ HTML gốc (chỉ là “móc” – không xử lý logic)

<div class="input-group" data-widget="sidebar-search">
  <input class="form-control form-control-sidebar"
         type="search"
         placeholder="Search"
         aria-label="Search">
  <div class="input-group-append">
    <button class="btn btn-sidebar">
      <i class="fas fa-search fa-fw"></i>
    </button>
  </div>
</div>

👉 Không có action, không submit, chỉ là UI + attribute data-widget.

---

2️⃣ JavaScript gốc của AdminLTE (quan trọng nhất)

📍 File (AdminLTE 3.x):

dist/js/adminlte.js

hoặc

dist/js/adminlte.min.js

---

3️⃣ Class xử lý: SidebarSearch

AdminLTE dùng class này để:

• Lắng nghe keyup trong ô search

• Duyệt menu sidebar

• Highlight chữ match

• Sinh HTML kết quả

🔍 Trích đoạn code gốc (đã format cho dễ đọc)

class SidebarSearch {
  constructor(element, config) {
    this._element = element
    this._config = config
    this._input = element.querySelector('input')
    this._results = document.createElement('div')
    this._results.classList.add('sidebar-search-results')
    this._menu = document.querySelector(this._config.target)

    element.appendChild(this._results)
    this._addEventListeners()
  }

  _addEventListeners() {
    this._input.addEventListener('keyup', event => {
      if (this._input.value.length < this._config.minLength) {
        this._clearResults()
        return
      }
      this._search()
    })
  }

---

4️⃣ Nó search cái gì?

👉 Sidebar menu (.nav-sidebar)

_search() {
  const searchValue = this._input.value.toLowerCase()
  const links = this._menu.querySelectorAll('a.nav-link')

  let results = []

  links.forEach(link => {
    const text = link.textContent.toLowerCase()
    if (text.includes(searchValue)) {
      results.push(link)
    }
  })

  this._showResults(results)
}

✔️ Không gọi API
✔️ Không query database
✔️ Chỉ lọc DOM menu

---

5️⃣ Vì sao xuất hiện HTML này?

<div class="sidebar-search-results">
  <div class="list-group">
    <a href="#" class="list-group-item">
      <div class="search-title">
        No element found!
      </div>
    </a>
  </div>
</div>

👉 Được tạo từ JS:

_showResults(results) {
  if (!results.length) {
    this._results.innerHTML = `
      <div class="list-group">
        <a href="#" class="list-group-item">
          <div class="search-title">No element found!</div>
        </a>
      </div>
    `
    return
  }
}

⚠️ Đoạn HTML này không tồn tại trong template ban đầu
→ JS tự sinh & gắn vào DOM

---

6️⃣ Vì sao chữ bị bọc <strong class="text-light">?

AdminLTE highlight keyword:

_highlight(text, search) {
  return text.replace(
    new RegExp(search, 'gi'),
    match => `<strong class="text-light">${match}</strong>`
  )
}

➡️ Nên mới thấy HTML bị băm nhỏ từng ký tự như Tiến sĩ M paste.

---

7️⃣ Cấu hình mặc định

const Default = {
  target: '.nav-sidebar',
  minLength: 3
}

📌 Gõ < 3 ký tự → không search

---

8️⃣ Muốn customize thì làm sao? (gợi ý nhanh)

🔧 Override bằng JS riêng

$('[data-widget="sidebar-search"]').SidebarSearch({
  minLength: 1,
  target: '.nav-sidebar'
})

🔧 Hoặc viết search riêng (API / JSON / DB)

👉 Phải bỏ data-widget="sidebar-search"
👉 Tự bind keyup theo ý

---

9️⃣ Kết luận nhanh cho Tiến sĩ M

Câu hỏi	Trả lời
Search có submit form không?	❌ Không
Có query server không?	❌ Không
Search ở đâu?	DOM .nav-sidebar
Code xử lý ở đâu?	adminlte.js → SidebarSearch
HTML kết quả từ đâu?	JS tự sinh

---

Nếu Tiến sĩ M muốn:

• ✂️ Tắt search mặc định

• 🔁 Hook search sang API

• 🎯 Search menu + nội dung page

• 🧠 Viết sidebar-search custom gọn nhẹ

👉 nói tôi biết, tôi build cho đúng style AdminLTE luôn 😎

━━━━━━━━━━━━━━━━━━━━

✨ made by AI