cancel
Showing results for 
Search instead for 
Did you mean: 

UI5 Autocomplete How to use no filter

Former Member
0 Kudos

Hi Folks,

I am trying to use Autocomplete control for address lookup using an external service in SAP CRM BSP component. I am struggling with a problem with the filter that the Autocomplete applies to the itemlist. The service I am using does a fuzzy lookup and returns the results that the user should see.

The problem is that the UI5 Autocomplete control applies it's own filter on top of it which is not very smart. Is there a way to prevent the UI5 control to not apply the filter? This way all the results from the service will be shown to the user.

I have tried not using the setFilter method but that does not help either as it takes the default filter.

<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<%@extension name="xhtmlb" prefix="xhtmlb" %>
<%@extension name="bsp" prefix="bsp" %>
<%@extension name="chtmlb" prefix="chtmlb" %>
<%@extension name="thtmlb" prefix="thtmlb" %>

<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
  id="sap-ui-bootstrap"
  type="text/javascript"
  data-sap-ui-libs="sap.ui.commons"
</script>

<div id="messageBarArea"></div>
<script>

function getData( searchStr ){

  var l_url = "https://XXXXXXXXX/apps/rest/addressSearch/searchPostalAddress.json?query=" + searchStr;
  var jqxhr = $.ajax( { url: l_url,
                        type: 'GET',
                        data: { featureClass: "G", style: "full", maxRows: 10 },
                        success: function( result, status, xhr ) {
                                                                  $.map( result, function ( value ){
                                                                                    if( oAutoComplete == null ) { alert("null"); }
                                                                                    oAutoComplete.addItem(new sap.ui.core.ListItem({text: value.label, key: value.code }));
                                                                   } );
                                                          }

                       } )

                       .fail( function(jqxhr, textStatus, errorThrown) {
                                                                         var msg = "Error calling web service: " + textStatus + " : " + errorThrown;
                                                                         sap.ui.commons.MessageBox.alert(msg);
                                                                         var error = new sap.ui.commons.Message("error", {type:sap.ui.commons.MessageType.Error, text:msg});
                                                                         var errorArray = new Array();
                                                                         errorArray.push(error);
                                                                         oMessageBar.addMessages(errorArray);

                       } );

}

var oMessageBar = new sap.ui.commons.MessageBar("messageBar");
oMessageBar.setMaxToasted(3);
oMessageBar.setMaxListed(7);
oMessageBar.setAnchorID("uiArea");
oMessageBar.setAnchorSnapPoint("begin top");

var oAutoComplete = new sap.ui.commons.AutoComplete({
                                                      tooltip: "Type an address",
                                                      maxPopupItems: 50,
                                                      displaySecondaryValues: true,
                                                      width: "400px",
                                                      suggest: function(oEvent){
                                                            var sValue = oEvent.getParameter("suggestValue");
                                                            oAutoComplete.destroyItems();
                                                            getData( sValue );
                                                            oAutoComplete.setFilterFunction(function(sValue, oItem){
                                                              return jQuery.sap.startsWithIgnoreCase(oItem.getText(), sValue)});
                                                      }
                                                    });
oAutoComplete.placeAt("uiArea");
</script>

<%
  data: lr_iterator TYPE REF TO ZCL_UI5_FORM_ITERATOR.
  CREATE OBJECT lr_iterator.
  cl_chtmlb_config=>set_iterator( lr_iterator ).
  data: lv_xml    type string.
  lv_xml    = controller->CONFIGURATION_DESCR->GET_CONFIG_DATA( ).

  data: lv_city  type string,
  lv_street           type string,
  lv_house            type string,
  lv_post_code        TYPE string.

  lv_house  =    controller->get_id( in_id = 'builaddress_struct.house_no' ).
  lv_street =    controller->get_id( in_id = 'builaddress_struct.street' ).
  lv_city   =    controller->get_id( in_id = 'builaddress_struct.city' ).
  lv_post_code  =    controller->get_id( in_id = 'builaddress_struct.postl_cod1' ).
%>

<chtmlb:config xml  = "<%= lv_xml %>"
               mode = "RUNTIME" />

Accepted Solutions (0)

Answers (1)

Answers (1)

Former Member
0 Kudos


Hi All,

Figured it out -

oAutoComplete.setFilterFunction(function(sValue, oItem){

     return oItem.getText()});

Cheers,

Gaurav