Skip to Content
Author's profile photo Former Member

How to implement JQuery autocomplete functionality in 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

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Steve Oldner
      Steve Oldner

      Too cool!  I have got to find something to use this in.


      Author's profile photo Former Member
      Former Member

      Looks good!

      Can this be incorporated with a dropdown with said values/vendor names (just in case the user doesn't know and can just select)? So like a combobox?

      Author's profile photo Rajeev Goswami
      Rajeev Goswami

      Good to see some new and nice features in old BSP 😉 .

      Author's profile photo Former Member
      Former Member

      Hello guys,

      thats exactly what I was looking for.

      But 2 questions.

      How do I get/read the selected value?

      And is there a possibility, to mark the entered characters bold in drop-down-list?


      Author's profile photo Former Member
      Former Member

      and one furhter it possible, to make this functionality possible without access to the internet? I mean calling the scripts local?

      Author's profile photo Wolfgang Mayer
      Wolfgang Mayer

      Hi guys, has anyone tried this for search views in CRM web UI as well? E.g. BP_HEAD_SEARCH/MainSearch? I tried to use the autocomplete function for the account name field (C32_W39_V132_search_parameters[1].VALUE1) getting values from an AJAX json call, however, it didn't work. The logic itself is fine since it works without any issues on a Z BSP application outside CRM UI. Thanks & regards Wolfgang