// source http://jsbin.com/qofiwan

index.html

<!-- This jsbin demonstrates UI5s different selection and input fields with value helps -->
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
<mvc:View
	controllerName="view1.initial"
	xmlns:l="sap.ui.layout"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m">
	<l:VerticalLayout
		class="sapUiContentPadding"
		width="100%">
		<l:content>
			<Text text="Select (simple)"/>
			<Select
				forceSelection="false"
				selectedKey=""
				items="{
					path: '/ProductCollection',
					sorter: { path: 'Name' }
				}">
				<core:Item key="{ProductId}" text="{Name}" />
          </Select>
          <Text text="Select (two column layout)"/>
          <Select
			forceSelection="true"
			showSecondaryValues= "true"
			items="{
				path: '/ProductCollection',
				sorter: { path: 'Name' }
			}">
			<core:ListItem key="{ProductId}" text="{Name}" additionalText= "{Price} {CurrencyCode}"/>
		  </Select>
          
			<Text text="ComboBox (simple)"/>
			<ComboBox
				items="{
					path: '/ProductCollection',
					sorter: { path: 'Name' }
				}">
				<core:Item key="{ProductId}" text="{Name}" />
			</ComboBox>
			<Text text="ComboBox (two column layout)"/>
			<ComboBox
				showSecondaryValues= "true"
				items="{
					path: '/ProductCollection',
					sorter: { path: 'Name' }
				}">
				<core:ListItem key="{ProductId}" text="{Name}" additionalText = "{Price} {CurrencyCode}"/>
			</ComboBox>
			<Text text="ComboBox (lazy loading, visually same as simple)"/>
			<ComboBox
				items="{
					path: '/ProductCollection',
					sorter: { path: 'Name' },
					suspended: true
				}"
				loadItems="handleLoadItems">
				<core:ListItem key="{ProductId}" text="{Name}"/>
			</ComboBox>
			<Text text="ComboBox (search in text and additional text)"/>
			<Text text="Search: 'Fla' and HT-613"/>
				<ComboBox
					showSecondaryValues= "true"
					filterSecondaryValues= "true"
					value="{/comboBoxValue}"
					selectedKey="{/comboBoxKey}"
					width="500px"
					items="{
						path: '/ProductCollection',
						sorter: { path: 'Name' }
					}">
					<core:ListItem key="{ProductId}" text="{Name}" additionalText="{ProductId}"/>
				</ComboBox>
			<Text text="Input (with suggestion)"/>
			<Input
				id="productInputSelection"
				type="Text"
				placeholder="Enter Product ..."
				showSuggestion="true"
				suggestionItems="{/ProductCollection}" >
				<suggestionItems>
					<core:Item text="{Name}" />
				</suggestionItems>
			</Input>
			<Text text="Input (with select dialog)"/>
			<Input
				id="productInputSelectDialog"
				type="Text"
				placeholder="Enter Product ..."
				showValueHelp="true"
				valueHelpRequest="handleValueHelp">
			</Input>
            
		</l:content>

  
	<SelectDialog
        id="selectDialog"
		title="Products"
		class="sapUiPopupWithPadding"
		items="{/ProductCollection}"
		search="_handleValueHelpSearch"
		confirm="_handleValueHelpClose"
		cancel="_handleValueHelpClose">
		<StandardListItem
			icon="{ProductPicUrl}"
			iconDensityAware="false"
			iconInset="false"
			title="{Name}"
			description="{ProductId}" />
	</SelectDialog>
  </l:VerticalLayout>
</mvc:View>
</script>
<script id="jsbin-javascript">
sap.ui.controller("view1.initial", {

		onInit: function () {
			// set explored app's demo model on this sample
			var oModel = new sap.ui.model.json.JSONModel("https://cors-anywhere.herokuapp.com/https://sapui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/products.json");
			this.getView().setModel(oModel);
		},

		handleValueHelp : function (oController) {
			this.inputId = oController.oSource.sId;
			// create value help dialog
			if (!this._valueHelpDialog) {
              this._valueHelpDialog = this.getView().byId("selectDialog"); 
				this.getView().addDependent(this._valueHelpDialog);
			}

			// open value help dialog
			this._valueHelpDialog.open();
		},

		_handleValueHelpSearch : function (evt) {
			var sValue = evt.getParameter("value");
			var oFilter = new sap.ui.model.Filter(
				"Name",
				sap.ui.model.FilterOperator.Contains, sValue
			);
			evt.getSource().getBinding("items").filter([oFilter]);
		},

		_handleValueHelpClose : function (evt) {
			var oSelectedItem = evt.getParameter("selectedItem");
			if (oSelectedItem) {
				var productInput = this.getView().byId(this.inputId);
				productInput.setValue(oSelectedItem.getTitle());
			}
			evt.getSource().getBinding("items").filter([]);
		},

		handleLoadItems: function(oControlEvent) {
			oControlEvent.getSource().getBinding("items").resume();
		}
  
});

sap.ui.xmlview("main", {
viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");
</script>


<script id="jsbin-source-javascript" type="text/javascript">sap.ui.controller("view1.initial", {

		onInit: function () {
			// set explored app's demo model on this sample
			var oModel = new sap.ui.model.json.JSONModel("https://cors-anywhere.herokuapp.com/https://sapui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/products.json");
			this.getView().setModel(oModel);
		},

		handleValueHelp : function (oController) {
			this.inputId = oController.oSource.sId;
			// create value help dialog
			if (!this._valueHelpDialog) {
              this._valueHelpDialog = this.getView().byId("selectDialog"); 
				this.getView().addDependent(this._valueHelpDialog);
			}

			// open value help dialog
			this._valueHelpDialog.open();
		},

		_handleValueHelpSearch : function (evt) {
			var sValue = evt.getParameter("value");
			var oFilter = new sap.ui.model.Filter(
				"Name",
				sap.ui.model.FilterOperator.Contains, sValue
			);
			evt.getSource().getBinding("items").filter([oFilter]);
		},

		_handleValueHelpClose : function (evt) {
			var oSelectedItem = evt.getParameter("selectedItem");
			if (oSelectedItem) {
				var productInput = this.getView().byId(this.inputId);
				productInput.setValue(oSelectedItem.getTitle());
			}
			evt.getSource().getBinding("items").filter([]);
		},

		handleLoadItems: function(oControlEvent) {
			oControlEvent.getSource().getBinding("items").resume();
		}
  
});

sap.ui.xmlview("main", {
viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");
</script>

jsbin.qofiwan.js

sap.ui.controller("view1.initial", {

		onInit: function () {
			// set explored app's demo model on this sample
			var oModel = new sap.ui.model.json.JSONModel("https://cors-anywhere.herokuapp.com/https://sapui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/products.json");
			this.getView().setModel(oModel);
		},

		handleValueHelp : function (oController) {
			this.inputId = oController.oSource.sId;
			// create value help dialog
			if (!this._valueHelpDialog) {
              this._valueHelpDialog = this.getView().byId("selectDialog"); 
				this.getView().addDependent(this._valueHelpDialog);
			}

			// open value help dialog
			this._valueHelpDialog.open();
		},

		_handleValueHelpSearch : function (evt) {
			var sValue = evt.getParameter("value");
			var oFilter = new sap.ui.model.Filter(
				"Name",
				sap.ui.model.FilterOperator.Contains, sValue
			);
			evt.getSource().getBinding("items").filter([oFilter]);
		},

		_handleValueHelpClose : function (evt) {
			var oSelectedItem = evt.getParameter("selectedItem");
			if (oSelectedItem) {
				var productInput = this.getView().byId(this.inputId);
				productInput.setValue(oSelectedItem.getTitle());
			}
			evt.getSource().getBinding("items").filter([]);
		},

		handleLoadItems: function(oControlEvent) {
			oControlEvent.getSource().getBinding("items").resume();
		}
  
});

sap.ui.xmlview("main", {
viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");