Skip to Content

Using JQuery Autocomplete with SAP BSP

If I had to guess a majority of people today do not realize the power within SAP BSP. In this blog I want to introduce some of this power by showing how to implement autocomplete functionality like google search.

The first thing we need to do is create a new BSP application.

1. Go to SE80, select BSP Application.

Screen Shot 2012-10-08 at 10.55.58 AM.png

2. Next create a controller class. Right click on your object and select create -> Controller

Screen Shot 2012-10-08 at 10.58.46 AM.png

Screen Shot 2012-10-08 at 11.00.18 AM.png

3. Next enter a name for the ABAP class that will be associated with the, double click on the name and the system will automatically create the class for you.

Screen Shot 2012-10-08 at 11.01.44 AM.png

4. Now we need to redefine the method do_request.

5. Once we have the method redefined we can start adding code. For this example add the following lines of code

  data view type ref to if_bsp_page.

  me->view_name = ‘index.htm’.

  view = me->create_view( view_name = me->view_name ).

  if view is bound.

    me->call_view( view ).


6. In order for this to get activated you need to add a class attribute called VIEW_NAME of type string. Activate your new class.

Screen Shot 2012-10-08 at 11.11.06 AM.png

7. Now we need to create the index.html view that we reference in the do_request method.

8. Right-click on your application, choose create->page

Screen Shot 2012-10-08 at 11.13.24 AM.png

Screen Shot 2012-10-08 at 11.14.51 AM.png

9. Now lets write some HTML and show the power of BSP!!

10. First thing is to open the index.html and remove everything except the following tags at the top.

<%@page language=”abap”%>

<%@extension name=”htmlb” prefix=”htmlb”%>

11. Add the following code

<%@page language=”abap”%>

<%@extension name=”htmlb” prefix=”htmlb”%>

<!DOCTYPE html>



    <style type=”text/css”>

        body { background:url(bg.jpg);font-family:Lucida Sans, Arial, Helvetica, Sans-Serif; font-size:13px; margin:20px;}

        #main { width:960px; margin: 0px auto; border:solid 1px #b2b3b5; -moz-border-radius:10px; padding:20px; background-color:#f6f6f6;}

        #header { text-align:center; border-bottom:solid 1px #b2b3b5; margin: 0 0 20px 0; }

        fieldset { border:none; width:650px;}

        legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold;}

        label { display:block; margin:15px 0 5px;}

        input[type=text], input[type=password] { width:300px; padding:5px; border:solid 1px #000;}

        //.prev, .next { background-color:#b0232a; padding:5px 10px; color:#fff; text-decoration:none;}

        //.prev:hover, .next:hover { background-color:#000; text-decoration:none;}

        //.prev { float:left;}

        //.next { float:right;}

        #steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px;}

        #steps li {font-size:24px; float:left; padding:10px; color:#b0b1b3;}

        #steps li span {font-size:11px; display:block;}

        #steps li.current { color:#000;}

        #makeWizard { background-color:#b0232a; color:#fff; padding:5px 10px; text-decoration:none; font-size:18px;}

        #makeWizard:hover { background-color:#000;}

        #shell {






        //#uploader { margin: 0 auto; }

        .info { text-align: center; padding: 50px 0; color: #666; font-family: Helvetica, Arial, sans-serif; }

        #runtime { text-transform: uppercase; }

        .info span { color: #81c468; }

        #LeftPane {

          /* optional, initial splitbar position */

          overflow: auto;



         * Right-side element of the splitter.


        #RightPane {

          padding: 2px;

          overflow: auto;


        .ui-tabs-nav li {position: relative;}

        .ui-tabs-selected a span {padding-right: 10px;}

        .ui-tabs-close {display: none;position: absolute;top: 3px;right: 0px;z-index: 800;width: 16px;height: 14px;font-size: 10px; font-style: normal;cursor: pointer;}

        .ui-tabs-selected .ui-tabs-close {display: block;}

        .ui-layout-west .ui-jqgrid tr.jqgrow td { border-bottom: 0px none;}

        .ui-datepicker {z-index:1200;}



                /* for Safari */

                -webkit-transform: rotate(-90deg);

                /* for Firefox */

                -moz-transform: rotate(-90deg);

                /* for Internet Explorer */

                filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);


        .error {

            font: normal 10px arial;

            padding: 3px;

            margin: 3px;

            background-color: #ffc;

            border: 1px solid #c00;


        label.error           { font-weight:normal;color:red;text-align:left;width:140px; padding-left:25px;

                                background: transparent url(images/cancel.png) no-repeat scroll left; }

        input.button          { position:absolute; top:125px; left:120px; padding:3px 6px;

                                border:2px solid #fff; margin:20px 0px 0px 0px; color:#3D7169;

                                font-family:Verdana, Arial, Helvetica, sans-serif;

                                background:#CCC; -moz-border-radius:5px; }

        input.button:hover    { background:#009FAA none repeat scroll 0% 0%; color:white; }


    <link rel=”stylesheet” href=”” type=”text/css” />

    <link rel=”stylesheet” href=”” type=”text/css” />

    <script type=”text/javascript” src=”“></script>

    <script type=”text/javascript” src=”“></script>

    <script type=”text/javascript” src=”“></script>

    <%= runtime->session_manager->header_script( ) %>

    <script type=”text/javascript”>



       $(function() {


                source: function( request, response )




                      url: “Vendorlookup.htm”,

                      dataType: “json”,

                      data: {term: request.term},

                      success: function(data){

                                  response($.map(data, function(item){



                                        id: };}));}



                minLength: 2,

                select: function(event, ui)








    <body leftmargin=”0″ marginwidth=”0″ topmargin=”0″ marginheight=”0″ offset=”0″>

      <center><table border=”0″ cellpadding=”0″ cellspacing=”0″ height=”100%” width=”100%” id=”backgroundTable”><tr>

          <td align=”center” valign=”top”><table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”800″ id=”templateContainer”><tr>

             <td align=”center” valign=”top”><table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”800″ id=”templateHeader”><tr>

                <td class=”headerContent”>

                  <script type=”text/javascript”



                  <div id=”switcher”></div>



                <td align=”left” valign=”top”>

                  <table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”800″ id=”templateBody”>


                    <td valign=”top” class=”bodyContent”>

                     <table border=”0″ cellpadding=”20″ cellspacing=”0″ width=”100%”><tr><td valign=”top”>

                      <div id=”shell”>

                        <label for=”vendor”>Vendor</label>

                        <input id=”vendor” type=”text” class=”required”/>

                        <input id=”vendor_id” type=”hidden”  />



      <td align=”center” valign=”top”><table border=”0″ cellpadding=”10″ cellspacing=”0″ width=”600″ id=”templateFooter”>

      <tr><td valign=”top” class=”footerContent”></td></tr></table></td></tr></table><br /></td></tr></table></center>



12. You need to import a background image. Right-click your BSP application and choose create->MIME Object->Import. Select the file and it will upload to the server.

Screen Shot 2012-10-08 at 11.25.45 AM.png

13. Now we need another view that will handle the autocomplete lookups.

14. Right-click on view and choose create. Enter the values Page: VendorLookup.htm, pagetype = Page with Flow Logic

Screen Shot 2012-10-08 at 11.29.09 AM.png

15. Once the view is created remove everything from the layout tab.

Screen Shot 2012-10-08 at 11.31.25 AM.png

16. Now navigate to the Event Handler tab, choose OnRequest.

Screen Shot 2012-10-08 at 11.32.33 AM.png

17. Now we get to add the ABAP code to do the lookup and return the information back to the BSP page.

data: ls_field type ihttpnvp,

      lt_field type tihttpnvp.

data: q type string.

DATA: it_vendor type STANDARD TABLE OF lfa1,

      wa_vendor like LINE OF it_vendor.

DATA: json_string type string.

TYPES: BEGIN OF t_vendor,

          id type i,

          NAME type NAME1_GP,

       END OF t_vendor.

data: it_return type STANDARD TABLE OF t_vendor,

      wa_return type t_vendor.

request->get_form_fields( CHANGING fields = lt_field ).

loop at lt_field into ls_field.

  if ls_field-name = ‘term’.

    q = ls_field-value.



CONCATENATE ‘%’ q ‘%’ into q.

select LIFNR name1 name2 name3 from lfa1 into CORRESPONDING FIELDS OF TABLE it_vendor where name1 like q or name2 like q.

if it_vendor is NOT INITIAL.

  CONCATENATE ‘[‘ json_string into json_string.

  data: count type i.

  count = 1.

  data: lines type i.

  DESCRIBE TABLE it_vendor LINES lines.

  loop at it_vendor into wa_vendor.

    data count_str type string.

    clear count_str.

    count_str = count.

    CONDENSE count_str.

    if lines > 1.

      if sy-tabix = lines.

        CONCATENATE json_string ‘{“id”:”‘ wa_vendor-LIFNR ‘”,”name”:”‘ wa_vendor-name1 ‘(‘ wa_vendor-lifnr ‘)’ ‘”}’ into json_string.


        CONCATENATE json_string ‘{“id”:”‘ wa_vendor-LIFNR ‘”,”name”:”‘ wa_vendor-name1 ‘(‘ wa_vendor-lifnr ‘)’ ‘”},’ into json_string.



      CONCATENATE json_string ‘{“id”:”‘ wa_vendor-LIFNR ‘”,”name”:”‘ wa_vendor-name1 ‘(‘ wa_vendor-lifnr ‘)’ ‘”}’ into json_string.


    count = count + 1.


   CONCATENATE  json_string ‘]’ into json_string.


  json_string = ‘[{}]’.




      DATA = json_string.

18. Now activate everything and give it a try. Right-click on and choose test. this will open the browser.

Start typing a vendors name and you should see something like…

Screen Shot 2012-10-08 at 11.49.07 AM.png

You must be Logged on to comment or reply to a post.
  • Hi Ryan Rader,

    Good presentation. Its working , except the list of vendors when we type few letters are not appearing down of the field.

    Also, Can you please let me know how to generate html code adding UI Elements in Screen?

    I need to develop few fields from SAP Tables and then need to create Order. This I need to publish in IPHONE.

    <email id removed by moderator>

    With REgards,