JQUERY and HTMLB input field

[former_member201781]

Hi Experts,

Has anybody successfully used JQuery Autocomplete with htmlb input filed within View with controller page?  I was not able to activate autocomplete due to some script error that htmlb generates.  If I use regular <input> tag, autocomplete works fine.  However, I am not able to assign the value of input filed to any variable for my controller class or page attribute.

I have watched Thomas Jung ABAP Freakshow but he seems to be dealing with regular bsp page with flow logic.  Not sure if it makes a difference though.

Any guidance is appreciated.

Thanks,

--Jamie.

[Former Member]

Yes I have gotten autocomplete to work with <htmlb

Have a look at my blog http://scn.sap.com/community/abap/bsp/blog/2012/10/08/how-to-implement-jquery-autocomplete-functiona...

Replace the code in the sample

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

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

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

with

<htmlb:content id               = "content"

                          design           = "classic+design2002+design2003"

                          controlRendering = "sap"

                          rtlAutoSwitch    = "true" >

                            <htmlb:page title="New Vendor" >

                               <htmlb:textView text = "Vendor:" design = "STANDARD" />

                               <htmlb:inputField id = "vendor" width = "100" size = "40" maxlength = "40" />

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

                            </htmlb:page>

                          </htmlb:content>

This will allow autocomplete for you.

[Former Member]

Hi Ryan,

I have similar requirement in CRM Web UI. Where I have custom component with two views(Search and Result View  ). In search view i have html input field with auto complete option. based on input value i need to display the data in result view.

I am able achieve auto complete with below code. But table view is not binding when i am using SRCfile reference in Script tag(Which mandate for auto complete). If i comment script tags then table view is displaying the values, but auto complete will not work. This is happening only when i call from quote/opportunity view and it works fine if it run independently.

I have pasted code below which i am using in .htm page which link to my CRM component.

I have kicked of discussion in scn forum but not got any response yet.

CRM - Data is not binding to table view when script tag with auto-complete .js file reference added ...

Please throw some suggestion on this.

<link rel="stylesheet" href="https://answers.sap.com//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"></link>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>

</html>

<style>

  .ui-autocomplete {

    max-height: 400px;

    overflow-y: auto;

    /* prevent horizontal scrollbar */

    overflow-x: hidden;

  }

  * html .ui-autocomplete {

    height: 500px;

  }

  </style>

  <script>

  $(function() { var availableTags = [

<% LOOP AT ZL_ZGEN_PRO_SEARCHVIEW_IMPL=>gt_pdes INTO ls_pdes. %>

                      <% lv_t1 = ls_pdes-SHORT_TEXT.%>

                      <% lv_id = lv_id + 1. %>

                      <% IF lv_id LT ZL_ZGEN_PRO_SEARCHVIEW_IMPL=>gv_lines. %>

                       "<%= lv_t1 %>",

                      <% ELSE. %>

                        "<%= lv_t1 %>"

                      <% ENDIF. %>

                      <% ENDLOOP.%> ];

  function split( val ) {

      return val.split( /,\s*/ );

    }

    function extractLast( term ) {

      return split( term ).pop();

    }

    $( "#tags" )

      .bind( "keydown", function( event ) {

        if ( event.keyCode === $.ui.keyCode.TAB &&

            $( this ).autocomplete( "instance" ).menu.active ) {

          event.preventDefault();

        }

      })

      .autocomplete({

        minLength: 0,

        source: function( request, response ) {

          response( $.ui.autocomplete.filter(

            availableTags, extractLast( request.term ) ) );

        },

        focus: function() {

          return false;

        },

        select: function( event, ui ) {

          var terms = split( this.value );

          terms.pop();

          terms.push( ui.item.value );

          terms.push( "" );

          this.value = terms.join( ", " );

          return false;

        }

      });

  });

  </script>

<input id="tags" name="BPROD"  />