Skip to Content

Search results with an input

Hi, i have this screen:

so i want to search in my odata depending the value of the input when i press my button and display the resullt on the right, i've made apps loading a list and things like that but no like this do someone can tell me where can i read something similar ?

i'm using the northwind's odata and the user write a category in the input so the products that belong of that category are displayed

sapui5.png (14.6 kB)
sapui5.png (26.3 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Feb 13 at 09:21 PM

    Hello Naoto, you are probably going to want to take your input and filter it using the SAPUI5 Filter: https://sapui5.hana.ondemand.com/#/api/sap.ui.model.Filter/overview this might be helpful. If you are interested in reading more about OData filtering, you can look into this: http://www.odata.org/getting-started/basic-tutorial/#filter

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 22 at 06:31 PM

    I tried this:

    INPUT
    <Input id="cat" value="" tooltip="Ejemplo: 11111 , 22222 , A4333" submit="onSearchs"/>
    BOTON
    <Button icon="sap-icon://search" type="Default" press="onSearch"/>
    

    In this case, be cause i was using an input and bottom you need to program the buttom and obtionaly a submit for the input so when the press Enter a event is triggered. Another important point is this don't use jquery that's why the code is little different:

    Input (Event submit)

    		onSearchs : function(oEvent) {
    			// build filter array
    			var aFilter = [];
    			// fetch event parameter
    			var sQuery = oEvent.getParameter("value");
    			// Regresa la lista
    			var oList = this.getView().byId("results");
    			// get binding for aggregation 'items'
    			var oBinding = oList.getBinding("items");
    
    
    			if (sQuery) {
    				aFilter.push(new Filter("CategoryName", FilterOperator.Contains, sQuery));
    			}
    			// apply filter. an empty filter array will show all items
    			oBinding.filter(aFilter);
    		},
    

    bottom

    onSearch : function(oEvent) {
    			// build filter array
    			var aFilter = [];
    			// fetch event parameter
    			var sQuery = this.byId('cat').getValue();
    			// Regresa la lista
    			var oList = this.getView().byId("results");
    			// get binding for aggregation 'items'
    			var oBinding = oList.getBinding("items");
    
    
    			if (sQuery) {
    				aFilter.push(new Filter("CategoryName", FilterOperator.Contains, sQuery));
    			}
    			// apply filter. an empty filter array will show all items
    			oBinding.filter(aFilter);
    		},
    

    As Paul Aschmann mentioned is better to use on searchfield but this is for learning purpose and that's ok

    Add comment
    10|10000 characters needed characters exceeded