SearchField SAP SE An input field to search for a specific item. <h3>Overview</h3> A search field is needed when the user needs to find specific information in large amounts of data. The search field is also the control of choice for filtering down a given amount of information. <h3>Structure</h3> The search input field can be used in two ways: <ul> <li>Manual search - The search is triggered after the user presses the search button. Manual search uses a “starts with” approach.</li> <li>Live search (search-as-you-type) - The search is triggered after each button press. A suggestion list is shown below the search field. Live search uses a “contains” approach.</li> </ul> <h3>Usage</h3> <h4>When to use:</h4> <ul> <li> Use live search whenever possible. </li> <li> Use a manual search only if the amount of data is too large and if your app would otherwise run into performance issues. </li> </ul> <h3>Responsive Behavior</h3> On mobile devices, there is no refresh button in the search field. "Pull Down to Refresh" is used instead. The "Pull Down to Refresh" arrow icon is animated and spins to signal that the user should release it. sap.ui.core/Control Input Value. Defines the CSS width of the input. If not set, width is 100%. Boolean property to enable the control (default is true). Invisible inputs are not rendered. Maximum number of characters. Value '0' means the feature is switched off. Text shown when no value available. Default placeholder text is the word "Search" in the current local language (if supported) or in English. Set to false to hide the magnifier icon. This parameter is deprecated. Use "showSearchButton" instead. Set to true to display a refresh button in place of the search icon. By pressing the refresh button or F5 key on keyboard, the user can reload the results list without changing the search string. Tooltip text of the refresh button. If it is not set, the Default tooltip text is the word "Refresh" in the current local language (if supported) or in English. Tooltips are not displayed on touch devices. Set to true to show the search button with the magnifier icon. If false, both the search and refresh buttons are not displayed even if the "showRefreshButton" property is true. If true, a <code>suggest</code> event is fired when user types in the input and when the input is focused. On a phone device, a full screen dialog with suggestions is always shown even if the suggestions list is empty. Normally, search text is selected for copy when the SearchField is focused by keyboard navigation. If an application re-renders the SearchField during the liveChange event, set this property to false to disable text selection by focus. This parameter is deprecated and has no effect in run time. The cursor position of a focused search field is restored after re-rendering automatically. Event which is fired when the user triggers a search. The search query string. Suggestion list item in case if the user has selected an item from the suggestions list. Indicates if the user pressed the refresh icon. Indicates if the user pressed the clear icon. This event is fired when the value of the search field is changed by a user - e.g. at each key press. Do not invalidate or re-render a focused search field, especially during the liveChange event. Current search string. This event is fired when the search field is initially focused or its value is changed by the user. This event means that suggestion data should be updated, in case if suggestions are used. Use the value parameter to create new suggestions for it. Current search string of the search field. <code>SuggestionItems</code> are the items which will be shown in the suggestions list. The following properties can be used: <ul> <li><code>key</code> is not displayed and may be used as internal technical field</li> <li><code>text</code> is displayed as normal suggestion text</li> <li><code>icon</code></li> <li><code>description</code> - additional text may be used to visually display search item type or category</li> </ul> Association to controls / ids which describe this control (see WAI-ARIA attribute aria-describedby). Association to controls / ids which label this control (see WAI-ARIA attribute aria-labelledby).