Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

Ajax search for MII 12.2

Hi guys,

I am writing to ask you for some assistance. I have to implement an Ajax search for an input box in MII 12.2. It should suggest possible entry values when I type in, let's say, 2 characters.

My IRPT file head section:

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>Ajax Test Project</title>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script type="text/javascript" src="javascript/ms.js"></script>

<script type="text/javascript" src="javascript/ajaxfunc.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>

<link rel="stylesheet" type="text/css" href="css/ms.css"/>

</head>

The section with the input box (as it can be seen, it lies within a table, the table is called InputTable, has been referenced in my ms.css):

<td><input class="text" type="text" id="Workcenter2" name="Workcenter2" tabindex="5" height="18px"/></td>

This is my Javascript function:

$("#Workcenter2").autocomplete({

autoFocus: true,

source: function (request, response) {

  $.ajax({

   url: "/XMII/Runner?Transaction=YDM/AjaxProject/Dialogs/Logic/WorkCenterValuesTrx&TRXID=1&OutputParameter=Results",

   type: "GET",

   dataType: "xml",

   data: {

    maxRows: 10,

    Workcenter2: request.term

   },

   success: function (data) {

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

     return {

      label: key,

      value: item

     }

    }))

   },

   error: function () {

    alert("Due to an unexpected error, we were unable to load data.");

   },

   messages: {

    noResults: '',

    results: function() {}

   }

  });

},

minLength: 2

});

I can access the transaction from the browser (for the sake of testing), it displays all possible entries in an XML format. When I run the code in MII I have no compilation errors, but still no suggestions when I type in two letters. Last, I add the relevant part of my CSS:

/* loading - the AJAX indicator */
table.InputTable td .ui-autocomplete-loading
{
background: white url("../images/loader.gif") right center no-repeat;
}

table.InputTable td .autocomplete-suggestions
{
border: 1px solid #999;
background: #fff;
cursor: default;
overflow: auto;
}

table.InputTable td .autocomplete-suggestion
{
padding: 10px 5px;
font-size: 1.2em;
white-space: nowrap;
overflow: hidden;
}

table.InputTable td .autocomplete-selected
{
background: #f0f0f0;
}

table.InputTable td .text
{
display: block;
}

I am not really experienced in Ajax, so any suggestion from your side will be appreciated.

Best,

Yavor

Former Member
replied

I think your issue may be because you are using the map function like you would if your data was in the json format. Below is an example using map with xml. You will probably need to do something similar.

function( xmlResponse ) {

    response($( "Row", xmlResponse ).map(function() {

    return { value: $( "ARBPL", this ).text() + ", " + $.trim( $( "KTEXT", this ).text()),

     id: $( "ARBPL", this ).text(),

     desc:$.trim( $( "KTEXT", this ).text())

     };

    }));

0 View this answer in context
Not what you were looking for? View more on this topic or Ask a question