TMlSkinSearchEdit

A search box with a dropdown suggestion list that filters as you type, including pinyin matching.

Category
Edits & pickers
Unit
uMlSkinSearchEdit.pas
Inherits from
TMlSkinPngEdit → TMlSkinCustomControl

Notes

  • The candidates live in Items; the list filters and drops down while the user types.
  • Options covers the dropdown width and height, row height, selection colors and whether pinyin filtering is on (matching Chinese entries by their initials).
  • Opening and closing the list fire OnDropDown and OnCloseUp.

Example

From the demo MlSkin.QQ聊天软件.v3.0 (.dfm form file)

object edt4: TMlSkinSearchEdit
  Left = 0
  Top = 60
  Width = 235
  Height = 27
  Cursor = crIBeam
  Margins.Left = 1
  Margins.Top = 1
  Margins.Right = 1
  Margins.Bottom = 2
  TextHint = 'TextHint'
  FontHint.Charset = DEFAULT_CHARSET
  FontHint.Color = 11711154
  FontHint.Height = -11
  FontHint.Name = 'Tahoma'
  FontHint.Style = []
  BorderNormal = 'MlSkinBorderNormal'
  BorderHot = 'MlSkinBorderHot'
  EdItems = <
  ...

Properties 11

NameTypeDefaultDescription
FontHintTFont—Font of the placeholder text, usually lighter than the main text.
BorderNormalTMlResID—Border image in the normal state, given as an image ID or path.
BorderHotTMlResID—Border image used on hover or while focused.
ReadOnlyBooleanFalseRead-only: the content cannot be edited, but it can still be selected and copied.
Textstring—The text shown or typed in the control.
TextHintstring—Placeholder text shown in a light color while the control is empty, for example "Type a keyword".
MaxLengthInteger0Maximum number of characters; 0 means no limit.
EdItemsTMlEditItems—The items inside the edit: each has its images (normal, hot, pressed), text, position and visibility — this is how clear, search or reveal-password buttons are built.
SpaceTMlSpaceSize—Padding between the text and the border (left, top, right, bottom); switch its Active on first.
ItemsTStrings—The list of candidates; typing filters it and drops the list down.
OptionsTSEPopupListOptions—Dropdown list settings: width, height, row height, colors and font colors for the selected and normal rows, frame color, and whether pinyin filtering is on (matching Chinese entries by their initials).

Events 3

NameTypeDefaultDescription
OnChangeTNotifyEvent—Fires when the content changes.
OnCloseUpTNotifyEvent—Fires when the dropdown list closes.
OnDropDownTNotifyEvent—Fires when the dropdown list opens.
Properties of TMlSkinPngEdit 3
NameTypeDefaultDescription
TextHintHideInKeyBooleanFalseWhen the placeholder disappears: with this on it stays while focused and hides only once a character is typed.
CursorColorTColorclBlackColour of the caret.
DisableIMEBooleanFalseDisables the IME so only Latin letters and digits can be typed — useful for account or serial number fields.
Properties of TMlSkinCustomControl 5
NameTypeDefaultDescription
AboutTMlAboutInfo—A design-time property: double-clicking it in the Object Inspector opens the MLSkin about box with the component version. It has no effect at run time and is not stored in the .dfm.
TransparentBooleanTrueTransparent background: the control skips its own fill and shows the form background (image or color) instead.
ColorTColorclWhiteBackground color of the control; ignored while Transparent is on.
AutoInvalidateBooleanFalseRepaints automatically when the content changes. Turn it on if property changes do not show up.
EraseBackgroundBooleanFalseWhether the background is erased before painting; worth toggling if the control flickers.
Events of TMlSkinCustomControl 4
NameTypeDefaultDescription
OnDPIChangedTMlDPIChangedEvent—Fires when the screen DPI changes, for example when the window moves to a monitor with a different scaling — a good place to re-adjust anything you draw yourself.
OnBackgroundChangingTMlBackgroundEvent—Fires just before the background changes, giving you a chance to adjust what is drawn.
OnBackgroundChangedTMlCustomDrawEvent—Fires after the background has been drawn, so you can paint on top of it.
OnVisibleChangedTNotifyEvent—Fires when the control is shown or hidden.

Only the properties and events MLSkin adds are listed here. Standard VCL properties such as Align, Anchors, Font and OnClick are available too and behave exactly as on the stock controls.

Offline helpA PDF / CHM version is available for offline reading.