Searchbar

Searchbar Properties

Prop	Type	Default	Description
init	boolean	true	Khởi tạo Searchbar
value	string | number		Cho phép xác định giá trị của Searchbar. Có thể hữu dụng trong trường hợp customSearch được bật
form	boolean	true	Sẽ được render bởi form thay vì div
placeholder	string	"Search"	Input placeholder text
clearButton	boolean	true	Bât button xóa search input
expandable	boolean	false	Bật chế độ expandable searchbar
inline	boolean	false	Bật sử dụng search input inline
spellcheck	boolean		Gía trị thuộc tính spellcheck của input element
searchContainer	string | object		CSS selector hoặc HTML element của List chứa nội dung sẽ search
searchIn	string	.item-title	CSS selector của list item nên trong list view element sẽ tìm kiếm. Thường tìm kiếm thông qua title ('.item-title'). Có thể sử dụng các CSS selector: '.item-title, .item-text',...
searchItem	string	li	CSS selector của item sẽ tìm kiếm. Nếu tìm kiếm bên trong list view thì search item sẽ là li
searchGroup	string	.list-group	CSS selector của group element. Được sử dụng khi hideGroup được bật để ẩn groups
searchGroupTitle	string	.list-group-title, .item-divider	CSS selector của group titles và dividers. Được sử dụng khi hideDividers được bật để ẩn group titles vả dividers. If we do a search in List View, then it usually a list group title or list item divider.
foundEl	string | object	.searchbar-found	CSS selector hoặc HTMLElement của nơi sẽ render các item tìm kiếm được. Nếu không xác định searchbar sẽ tìm '.searchbar-found' xuất hiện trên trang
notFoundEl	string | object	.searchbar-not-found	CSS selector hoặc HTMLElement của element khi danh sách tìm kiếm rỗng. Nế không xác định, searchbar sẽ tìm kiếm .searchbar-not-found element trên trang
backdrop	boolean		Bật lớp overlay phía dưới searchbar khi searchbar input đang được focus
backdropEl	string | object		CSS selector hoặc HTMLElement của searchbar backdrop element. Nếu không xác định và giá trị của backdrop parameter là true sẽ tìm .searchbar-backdrop element nếu không thấy sẽ tự động tạo mới
ignore	string	.searchbar-ignore	CSS selector dùng cho các items sẽ bỏ qua bởi searchbar và luôn hiển thị trong phần kết quả tìm kiếm
customSearch	boolean	false	Khi đuọc bật searchbar sẽ không tìm kiếm trong list blocks được xác định bơi searchContainer và có thể tùy chỉnh chức năng search, như gọi APIs với kết quả và hiển kết quả
removeDiacritics	boolean	false	Bật để bỏ/thay thế dấu khi tìm kiếm
hideDividers	boolean	true	Nếu bật, then search will consider item dividers and group titles and hide them if there are no found items right after them
hideGroups	boolean	true	Nếu ược bật, khi tìm kiếm sẽ xem xét các groups và ẩn chúng nếu không có mục nào được tìm thấy bên trong các nhóm này
noShadow	boolean	false	Vô hieuj hóa shadow trên MD theme
noHairline	boolean	false	Bỏ đường viền phía dưới searchbar (hairline) trên iOS theme

Searchbar Methods

Có thể truy xuất, sử dụng các methods thông qua ref

Method	Description
.search(query)	Buộc searchbar tìm kiếm query đã được truyền
.enable()	bật/kích hoạt searchbar
.disable()	Vô hiệu hóa/hủy kích hoạt searchbar
.toggle()	Toggle searchbar
.clear()	Xóa query tìm kiếm và cập nhật kết quả

Searchbar Events

Event	Arguments	Prop	Description
searchbarSearch	(searchbar, query, previousQuery)	onSearchbarSearch	Event sẽ được triggered khi tìm kiém (search field thay dổi). Đối số nhận vào instance của searchbar, query tìm kiếm và query trước đó
searchbarClear	(searchbar, previousQuery)	onSearchbarClear	Event sẽ được triggered khi người dùng click lên button xóa. Đối số nhận vào instance của searchbar và query trước đó
searchbarEnable	(searchbar)	onSearchbarEnable	Event sẽ được triggered khi trạng thái của Searchbar trở thành active
searchbarDisable	(searchbar)	onSearchbarDisable	Event sẽ được triggered khi trạng thái của Searchbar trở thành inactive/disabled
change	(event)	onChange	Event sẽ được triggered khi khi nội dung searchbar input thay đổi
input	(event)	onInput	Event sẽ được triggered khi "input" event xuât hiện trên on searchbar input element
focus	(event)	onFocus	Event sẽ được triggered khi searchbar input được focus
blur	(event)	onBlur	Event sẽ được triggered khi người dùng không còn focus vào input
clickClear	(event)	onClickClear	Event sẽ được triggered khi người dùng click lê nút xóa nội dung search

Searchbar Slots

Searchbar React component có các slots giúp tùy biến element:

• default - element sẽ được chèn dưới dạng element con cuôi cùng của <div className="searchbar-inner"/>
• before-inner - element sẽ được chèn ngay trước <div className="searchbar-inner"/> element
• after-inner - element sẽ được chèn ngay sau <div className="searchbar-inner"/> element
• inner-start - element sẽ được chèn dưới dạng element con đầu tiên của <div className="searchbar-inner"/> element
• inner-end - element sẽ được chèn dưới dạng element con cuối cùng của <div className="searchbar-inner"/> element
• input-wrap-start - element sẽ được chèn dưới dạng element con đầu tiên của <div className="searchbar-input-wrap"/> element
• input-wrap-end - sẽ được chèn dưới dạng element con cuối cùng của <div className="searchbar-input-wrap"/> element

Without Slots:

<Searchbar
 disableButtonText="Cancel"
 placeholder="Search in items"
 clearButton={true}
></Searchbar>

{/* Renders to: */}

<form className="searchbar">
 <div className="searchbar-inner">
 <div className="searchbar-input-wrap">
 <input type="search" placeholder="Search">
 <i className="searchbar-icon"></i>
 <span className="input-clear-button"></span>
 </div>
 <span className="searchbar-disable-button">Cancel</span>
 </div>
</form>

With Slots:

<Searchbar
 disableButtonText="Cancel"
 placeholder="Search in items"
 clearButton={true}
>
 <div slot="inner-start">Inner Start</div>
 <div slot="inner-end">Inner End</div>
 <div slot="input-wrap-start">Input Wrap Start</div>
 <div slot="input-wrap-end">Input Wrap End</div>
 <div slot="before-inner">Before Inner</div>
 <div slot="after-inner">After Inner</div>
</Searchbar>

{/* Renders thành: */}

<form className="searchbar">
 <div slot="before-inner">Before Inner</div>
 <div className="searchbar-inner">
 <div slot="inner-start">Inner Start</div>
 <div className="searchbar-input-wrap">
 <div slot="input-wrap-start">Input Wrap Start</div>
 <input type="search" placeholder="Search">
 <i className="searchbar-icon"></i>
 <span className="input-clear-button"></span>
 <div slot="input-wrap-end">Input Wrap End</div>
 </div>
 <span className="searchbar-disable-button">Cancel</span>
 <div slot="inner-end">Inner End</div>
 </div>
 <div slot="after-inner">After Inner</div>
</form>

Ví dụ

Searchbar

Code demo fallback when rendering server side!

Expandable Searchbar

Code demo fallback when rendering server side!