Live search using BSP (BSP中AJAX实现)

最新推荐文章于 2024-10-04 08:00:00 发布

技术价值体现之道践行者

最新推荐文章于 2024-10-04 08:00:00 发布

阅读量1.1k

点赞数

分类专栏： SAP BSP 文章标签： ajax search xmlhttprequest http服务器 input crm

SAP BSP 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

初学BSP, 一直在想如何实现AJAX效果, 起到无意看到这篇网文, 才有一种惑然开朗的感觉, 亏我还过ASP/ASP.net , 真是做了几年ABAP做傻了,呵呵

其实BSP和ASP很象, 可以采用ASP的方法来实现AJAX应用, 无非是调用xmlHttpRequest对象而己.

原文地址: http://scnblogs.techweb.com.cn/leonard/archives/38.html, 转贴如下:

你一定经常使用google或百度。当你输入要查询的词条的时候，在输入框的下边会自动提示可能的选项，随着你输入值的变化而变化。这就是所谓”Search-as-you-type”。

Google “Search-as-you-type” 有一些演示code可下载，要运行的话再下载一个超轻量级的Http服务器xampp。
http://code.google.com/p/search-as-you-type/

上面的code是用PHP写的，要知道它的原理，可以参考下面这篇文章：
PHP Ajax live search
http://www.w3schools.com/php/php_ajax_livesearch.asp

那么这种技术用SAP的技术是否可以实现呢？回答是肯定的。用简单的BSP+Javascript编程就可以实现。

首先创建一个BSP Application: zlive_search

再创建两个Pages with Flow Logic:
1. search.htm
2. livesearch.htm

Search.htm - search page with an input text box

<%@page language=”abap”%>
<%@extension name=”htmlb” prefix=”htmlb”%>

<html>
<head>
<script type=”text/javascript”>
var xmlhttp;

function stateChanged()
{
if (xmlhttp.readyState==4)
  {
  document.getElementById(”livesearch”).innerHTML=xmlhttp.responseText;
  document.getElementById(”livesearch”).style.border=”1px solid #A5ACB2″;

   /* auto-completion, if only one hit is found */
  str1=document.getElementById(”livesearch”).innerHTML;
  if (str1.search(”<BR>”)==-1 && str1.search(”no suggestion”)==-1)
  { document.getElementById(”txt1″).value=str1;}
  }
}

</body>
</html>

livesearch.htm - Destination page for XMLHttpRequest

input: query string ‘q’

output: search string in SCARR-CARRNAME and return list of matches

<%@page language=”abap”%>
<%@extension name=”htmlb” prefix=”htmlb”%>

<% DATA: input_str TYPE string.
DATA: html TYPE string.

DATA: lt_scarr TYPE TABLE OF scarr.

FIELD-SYMBOLS:
<fs_scarr> TYPE scarr.

CLEAR html.
* get input string
input_str = request->get_form_field( ‘q’ ).

* retrieve airline text
SELECT * FROM scarr INTO TABLE lt_scarr.

* build result list
IF strlen( input_str ) > 0.
LOOP AT lt_scarr ASSIGNING <fs_scarr>.
IF <fs_scarr>-carrname CS input_str.
IF strlen( html ) = 0.
CONCATENATE `<a href=’` <fs_scarr>-url `’ target=’_blank’>`
<fs_scarr>-carrname `</a>`
INTO html.
ELSE.
CONCATENATE html `<br />` `<a href=’` <fs_scarr>-url `’ target=’_blank’>`
<fs_scarr>-carrname `</a>`
INTO html.
ENDIF.
ENDIF.
ENDLOOP.
IF strlen( html ) = 0.
html = ‘<no suggestion>’.
ENDIF.
ENDIF.

* send http response
response->set_cdata( html ).
%>

我们部门的几个同事为客户的CRM系统的Web UI增加了这个功能。在CRM7.0中，由于THTMLB库已经增加了Ajax和丰富的Javascipt功能，实现起来比较简单。在CRM6.0中，我们运用以上代码为雏形，并自己写了一些Javascipt以实现鼠标和键盘在下拉列表中的选择功能。在提高性能方面，我们对数据库读取进行了缓存。

用户在实际操作中不需要点网页上的F4按钮，而是边输入就可以边在提示下拉框中看到是否出现要输入的整个字符串，感到很神奇，也感到使用很方便。