Combo box - Custom filtering "Contains"
You can override the default filtering "Starts with per term" with your own filter function using the setFilterFunction method. The "Contains" approach searches everywhere in the entries.
Z2UI5_CL_SMPC_APP_470
Controls
sap.m
UI5 1.71
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_470- Source file
z2ui5_cl_smpc_app_470.clas.abap↗- Library
- sap.m
- UI5 entity
sap.m.ComboBox- Demo kit sample
sap.m.sample.ComboBoxFilteringContains- SAP's own sample
- running at sdk.openui5.org ↗
- Minimum UI5
- 1.71 — the floor abap2UI5 holds its samples to
- In the playground
- runs in the browser, with no system and nothing installed
Keywords: combobox, combo, box, sap.m, comboboxfilteringcontains, vbox, label, listitem
Controls it builds
Read out of the builder chain by the abap2UI5 linter, not from the category this sample is filed under — which is what makes “which samples build one of these” a question the catalogue can answer at all.
Libraries
Run it here
The sample running, in this page — the app on its own, with no editor over it.
Switch to Playground with this code
Nothing is installed and nothing is sent anywhere: the ABAP is compiled to JavaScript in this browser and runs against abap2UI5 itself.
The ABAP
z2ui5_cl_smpc_app_470.clas.abap — 155 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords combobox combo box sap.m comboboxfilteringcontains vbox label listitem
" @summary You can override the default filtering "Starts with per term" with your own filter function using the setFilterFunction method. The "Contains" approach searches everywhere in the entries.
CLASS z2ui5_cl_smpc_app_470 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
TYPES: BEGIN OF ty_s_country,
key TYPE string,
text TYPE string,
END OF ty_s_country.
TYPES ty_t_country TYPE STANDARD TABLE OF ty_s_country WITH EMPTY KEY.
DATA t_countries TYPE ty_t_country.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
METHODS view_display.
METHODS model_init.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_470 IMPLEMENTATION.
METHOD z2ui5_if_app~main.
me->client = client.
IF client->check_on_init( ).
model_init( ).
view_display( ).
ELSEIF client->check_on_navigated( ).
view_display( ).
ENDIF.
ENDMETHOD.
METHOD view_display.
DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).
view->ele( n = `View` ns = `mvc`
)->a( n = `height` v = `100%`
)->a( n = `xmlns:core` v = `sap.ui.core`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->a( n = `xmlns` v = `sap.m`
)->ele( `Page`
)->a( n = `showHeader` v = `false`
)->a( n = `class` v = `sapUiContentPadding`
)->ele( `content`
)->ele( `VBox`
)->ele( `items`
)->tag( `Label`
)->a( n = `text` v = `Enter a search term, e.g. "Ge", and see filtered list.`
)->a( n = `labelFor` v = `combobox1`
)->ele( `ComboBox`
)->a( n = `id` v = `combobox1`
)->a( n = `showSecondaryValues` v = `true`
)->a( n = `filterSecondaryValues` v = `true`
)->a( n = `items` v = |\{ path: '{ client->_bind_path( t_countries ) }', sorter: \{ path: 'TEXT' \} \}|
)->tag( n = `ListItem` ns = `core`
)->a( n = `key` v = `{KEY}`
)->a( n = `text` v = `{TEXT}`
)->a( n = `additionalText` v = `{KEY}` ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
METHOD model_init.
" full mock /CountriesCollection of ui5/mock/countriesExtendedCollection.json
t_countries = VALUE #(
( key = `DZ` text = `Algeria` )
( key = `AR` text = `Argentina` )
( key = `AU` text = `Australia` )
( key = `AT` text = `Austria` )
( key = `BH` text = `Bahrain` )
( key = `BE` text = `Belgium` )
( key = `BA` text = `Bosnia and Herzegovina` )
( key = `BR` text = `Brazil` )
( key = `BG` text = `Bulgaria` )
( key = `CA` text = `Canada` )
( key = `CL` text = `Chile` )
( key = `CO` text = `Colombia` )
( key = `HR` text = `Croatia` )
( key = `CU` text = `Cuba` )
( key = `CZ` text = `Czech Republic` )
( key = `DK` text = `Denmark` )
( key = `EG` text = `Egypt` )
( key = `EE` text = `Estonia` )
( key = `FI` text = `Finland` )
( key = `FR` text = `France` )
( key = `GER` text = `Germany` )
( key = `GH` text = `Ghana` )
( key = `GR` text = `Greece` )
( key = `HU` text = `Hungary` )
( key = `IN` text = `India` )
( key = `ID` text = `Indonesia` )
( key = `IE` text = `Ireland` )
( key = `IL` text = `Israel` )
( key = `IT` text = `Italy` )
( key = `JP` text = `Japan` )
( key = `JO` text = `Jordan` )
( key = `KE` text = `Kenya` )
( key = `KW` text = `Kuwait` )
( key = `LV` text = `Latvia` )
( key = `LT` text = `Lithuania` )
( key = `MK` text = `Macedonia` )
( key = `MY` text = `Malaysia` )
( key = `MX` text = `Mexico` )
( key = `ME` text = `Montenegro` )
( key = `MA` text = `Morocco` )
( key = `NL` text = `Netherlands` )
( key = `NZ` text = `New Zealand` )
( key = `NG` text = `Nigeria` )
( key = `NO` text = `Norway` )
( key = `OM` text = `Oman` )
( key = `PE` text = `Peru` )
( key = `PH` text = `Philippines` )
( key = `PL` text = `Poland` )
( key = `PT` text = `Portugal` )
( key = `QA` text = `Qatar` )
( key = `RO` text = `Romania` )
( key = `RU` text = `Russia` )
( key = `SA` text = `Saudi Arabia` )
( key = `SN` text = `Senegal` )
( key = `RS` text = `Serbia` )
( key = `SG` text = `Singapore` )
( key = `SK` text = `Slovakia` )
( key = `SI` text = `Slovenia` )
( key = `ZA` text = `South Africa` )
( key = `KR` text = `South Korea` )
( key = `ES` text = `Spain` )
( key = `SE` text = `Sweden` )
( key = `CH` text = `Switzerland` )
( key = `TN` text = `Tunisia` )
( key = `TR` text = `Turkey` )
( key = `UG` text = `Uganda` )
( key = `UA` text = `Ukraine` )
( key = `AE` text = `United Arab Emirates` )
( key = `GB` text = `United Kingdom` )
( key = `YE` text = `Yemen` ) ).
ENDMETHOD.
ENDCLASS.
More in sap.m
- Input - Value Update — Since 1.24 the value property of sap.m.Input is not updated on every keystroke, but first…
- Combo box - Default Filtering — The default filtering is 'starts with per term', which filters by the beginning of every…
- Icon Tab Bar - Overflow Behavior — In this example when there is not enough space for all tab items to fit on the screen, th…
- Icon Tab Bar - Start and End Overflow — This sample illustrates the start and end overflow mode of the Icon Tab Bar.
- Icon Tab Bar - Inline mode tab icons — This sample illustrates tab icons for inline mode.
- Standard List Item - Icon — This list item offers a standardized user interface for list content with title, descript…
- Combo box - Custom filtering "Starts with" — You can override the default filtering "Starts with per term" with your own filter functi…
- Input - Suggestions - Dynamic — With the Input control's suggest event, you can handle the suggestionItems yourself dynam…
- Flex Box - Navigation Examples — Here is an example of how you can use navigation items as unordered list items in a Flex…
- ComboBox - Validation — The combo box control could be restricted to allow selection only from the items in the l…
- Object Header Responsive VI — A responsive Object Header whose intro and title are active links to sap.com, with a Curr…
- Header Container with Object Header — The Header Container combined with sap.m.ObjectHeader.
On this page