使用SuggestFramework

最新推荐文章于 2018-11-04 18:28:23 发布

ZHOUJIAOSHOU

最新推荐文章于 2018-11-04 18:28:23 发布

阅读量3.7k

点赞数

分类专栏：精品收集整理文章标签： function xmlhttprequest string input import url

精品收集整理专栏收录该内容

14 篇文章 0 订阅

订阅专栏

最近使用SuggestFramework 编写了个Suggest 的小测试示例,该示例主要分为四个部分(两个JSP 一个JS 一个CSS) 使用UTF-8字符集合.

两个JSP: 1 、em.jsp 主要用于前端检索JSP

                (1).action 必须。接受 GET 方式提交的数据，并返回相关 Javascript 数组的动态页。
                (2).capture 如果返回的结果不止一列（比如本例中的单词和中文意思），将要替换用户输入的那一列（从 1 开始算）。通常这个和数据库字段相对应。可选，默认为 1.
                (3).columns 下拉显示的列数，比如本例中，按字母查询单词，并将中文意思显示在右侧。可选，默认为 1.
                (4).delay 查询延时，单位为毫秒。较低的延时会得到更快的反应，但会加重服务器负担。可选，默认为 1000（1秒）。
                (5).heading 如果设为 true ，第一个数组值将作为不可选择项（标题栏）。当有两列或两列以上数据时非常有用。可选，默认为 false.

                 数据提交只需要两个数据
                  (1).type  输入框的name
                  (2).q  搜索关键字（默认UTF-8编码）

2、exp.jsp 主要用于访问数据库，返回要检索的集合。

                 必须返回数据。一维数组这么写：
                 new Array(”val1″, “val2″, “val3″);
                二维数组这么写：
                 new Array(
                 new Array(”第1行条第1列”, “第1行第2列”)，
                 new Array(”第2行条第1列”, “第1行条第2列”)，
                 new Array(”第3行条第1列”, “第1行条第2列”)
                 ) ;

其它的以次类推，为了提高效率可以做成缓存形式的。本例中直接连的数据库，呵呵！

一个JS ： SuggestFramework.js 这个是 SuggestFramework 框架JS

这个JS框架为的核心代码，就是没有注释，呵呵！

遇到个问题，浏览器会自动记录历史记录，autocomplete也关了。

一个CSS: SuggestFramework.css 样式表

               .SuggestFramework_List         提示内容所在区域
               .SuggestFramework_Heading      第一条提示
               .SuggestFramework_Highlighted 设置高亮的一条提示
               .SuggestFramework_Normal       其他提示

em.jsp 代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>Google </title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<style type="text/css">@import url("/bms/3730/3730order/SuggestFramework.css");</style>
    <style type="text/css">input { width: 400px; border: 1px solid #CCCCCC; }</style>
    <script type="text/javascript" src="/bms/3730/3730order/SuggestFramework.js"></script>
    <script type="text/javascript">window.onload = initializeSuggestFramework;</script>
</head>

<body>

   客户信息:<input id="example1" name="example1" type="text" action="/bms/3730/3730order/exp.jsp" columns="3" capture="0"   /><br />

</body>
</html>

exm.jsp 代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
    <%@ page import="cn.org.genomics.bms.conn.*" %>
    <%@ page import="cn.org.genomics.bms.sysbasic.*" %>
    <%@ page import="java.sql.ResultSet" %>

<%

SysBasic sysb=new SysBasic();
String array="";

    String input=new String((sysb.trim(request.getParameter("q"))).getBytes("ISO-8859-1"),"utf-8").replaceAll("/t","").replaceAll("/b","").toUpperCase();

if(!"".equals(input)&&input.getBytes().length>1){
ConnSql myconn=new ConnSql();
myconn.Ini("oracle");
ResultSet rs=null;
myconn.EmptySql();
rs=myconn.Query("select * from bms.c_bpartner where contact like '%"+input+"%' or CONTACT_PY like '%"+input+"%'");

while(rs.next()){
   if("".equals(array)){
   array ="new Array(" +"Array(/""+rs.getString("contact")+"/",/""+rs.getString("name")+"/",/""+rs.getString(1)+"/")" ;
   }
   else{
   array =array +",Array(/""+rs.getString("contact")+"/",/""+rs.getString("name")+"/",/""+rs.getString(1)+"/")" ;
   }
   //System.out.println(array);
}
rs.close();
myconn.Close();
}
if(!"".equals(array)){
array=array+");";
out.print(array);
}
System.out.println(array);

%>

SuggestFramework.js 代码

var sfw = new Array();

String.prototype.decode = function()
{
//alert(decodeURI(this));
return decodeURI(this); //返回所有值

};

String.prototype.encode = function() //对检索条件进行编码
{
var result = "";
if(this == "") return this;

if(typeof encodeURIComponent == "function")
{
  result = encodeURIComponent(this);

}
else
{
  var alpha = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_-";
  var string = this.toUTF8();
  result = "";
  for(var i = 0; i < string.length; i++)
  {
   if(alpha.indexOf(string.charAt(i)) == -1)
    result += "%" + string.charCodeAt(i).toHex();
   else
    result += string.charAt(i);
  }
}
//alert(result);
return result;
};

String.prototype.toHex = function()
{
var hex = "0123456789ABCDEF";
//alert("123213"+hex.charAt(this.value >> 4) + hex.charAt(this.value & 0xF));
return hex.charAt(this.value >> 4) + hex.charAt(this.value & 0xF);
};

String.prototype.toUTF8 = function()
{
var a, b, i = 0;
var result = "";

while(i < this.length)
{
  a = this.charCodeAt(i++);
  if(a >= 0xDC00 && a < 0xE000) continue;
  if(a >= 0xD800 && a < 0xDC00)
  {
   if(i >= this.length) continue;
   b = this.charCodeAt(i++);
   if(s < 0xDC00 || a >= 0xDE00) continue;
   a = ((a - 0xD800) << 10) + (b - 0xDC00) + 0x10000;
  }

  if(a < 0x80)
   result += String.fromCharCode(a);
  else if(a < 0x800)
   result += String.fromCharCode(0xC0 + (a >> 6), 0x80 + (a & 0x3F));
  else if(a < 0x10000)
   result += String.fromCharCode(0xE0 + (a >> 12), 0x80 + (a >> 6 & 0x3F), 0x80 + (a & 0x3F));
  else
   result += String.fromCharCode(0xF0 + (a >> 18), 0x80 + (a >> 12 & 0x3F), 0x80 + (a >> 6 & 0x3F), 0x80 + (a & 0x3F));
}
return result;
};

String.prototype.trim = function()
{
return this.replace(/^[/s]+|[/s]+$/, "");
};

  sfw[instance].outputContainer = document.createElement("div");
  sfw[instance].outputContainer.id             = sfw[instance].name + "_list";
  sfw[instance].outputContainer.className      = "SuggestFramework_List";
  sfw[instance].outputContainer.style.position = "absolute";
  sfw[instance].outputContainer.style.zIndex   = "1";
  sfw[instance].outputContainer.style.width    = sfw[instance].inputContainer.clientWidth + "px";
  sfw[instance].outputContainer.style.wordWrap = "break-word";
  sfw[instance].outputContainer.style.cursor   = "default";
  sfw[instance].inputContainer.parentNode.insertBefore(sfw[instance].outputContainer, sfw[instance].inputContainer.nextSibling);
  sfw[instance].inputContainer.parentNode.insertBefore(document.createElement("br"), sfw[instance].outputContainer);

  if(sfw[instance].columns > 1 && sfw[instance].capture > 1)
  {
   sfw[instance].hiddenInput = document.createElement("input");
   sfw[instance].hiddenInput.id   = "_" + sfw[instance].name;
   sfw[instance].hiddenInput.name = "_" + sfw[instance].name;
   sfw[instance].hiddenInput.type = "hidden";
   sfw[instance].inputContainer.parentNode.insertBefore(sfw[instance].hiddenInput, sfw[instance].inputContainer.nextSibling);
  }

  if(!sfwCreateConnection())
  {
   sfw[instance].proxy = document.createElement("iframe");
   sfw[instance].proxy.id = "proxy";
   sfw[instance].proxy.style.width   = "0";
   sfw[instance].proxy.style.height = "0";
   sfw[instance].proxy.style.display = "none";
   document.body.appendChild(sfw[instance].proxy);

   if(window.frames && window.frames["proxy"])
    sfw[instance].proxy = window.frames["proxy"];
   else if(document.getElementById("proxy").contentWindow)
    sfw[instance].proxy = document.getElementById("proxy").contentWindow;
   else
    sfw[instance].proxy = document.getElementById("proxy");
  }

  sfwHideOutput(instance);
  sfwThrottle(instance);
}
else
{
  throw 'Suggest Framework Error: Instance "' + sfw[instance].name + '" not initialized';
}
};

function sfwCreateConnection()
{
var asynchronousConnection;

try
{
  asynchronousConnection = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
  if(typeof XMLHttpRequest != "undefined")
   asynchronousConnection = new XMLHttpRequest();
}

return asynchronousConnection;
};

function sfwGetKey(e)
{
return ((window.event) ? window.event.keyCode : e.which);
};

function sfwHideOutput(instance)
{
sfw[instance].outputContainer.style.display = "none";
};

function sfwHighlight(instance, index)
{
sfw[instance].suggestionsIndex = index;

for(var i in sfw[instance].suggestions)
{
  var suggestionColumns = document.getElementById(sfw[instance].name + "_suggestions[" + i + "]").getElementsByTagName("td");
  for(var j in suggestionColumns)
   suggestionColumns[j].className = "SuggestFramework_Normal";
}

var suggestionColumns = document.getElementById(sfw[instance].name + "_suggestions[" + sfw[instance].suggestionsIndex + "]").getElementsByTagName("td");
for(var i in suggestionColumns)
suggestionColumns[i].className = "SuggestFramework_Highlighted";
};

function sfwIsHidden(instance)
{
return ((sfw[instance].outputContainer.style.display == "none") ? true : false);
};

function sfwProcessKeys(instance, e)
{
var keyDown   = 40;
var keyUp     = 38;
var keyTab    = 9;
var keyEnter = 13;
var keyEscape = 27;

if(!sfwIsHidden(instance))
{
  switch(sfwGetKey(e))
  {
   case keyDown:   sfwSelectNext(instance);     return;
   case keyUp:     sfwSelectPrevious(instance); return;
   case keyEnter: sfwSelectThis(instance);     return;
   case keyTab:    sfwSelectThis(instance);     return;
   case keyEscape: sfwHideOutput(instance);     return;
   default: return;
  }
}
};

function sfwProcessProxyRequest(instance)
{
var result = ((sfw[instance].proxy.document) ? sfw[instance].proxy.document : sfw[instance].proxy.contentDocument);
result = result.body.innerHTML.replace(//r|/n/g, " ").trim();

if(typeof eval(result) == "object")
sfwSuggest(instance, eval(result));
else
setTimeout("sfwProcessProxyRequest(" + instance + ")", 10);
};

function sfwProcessRequest(instance)
{
if(sfw[instance].connection.readyState == 4)
{
if(sfw[instance].connection.status == 200)
sfwSuggest(instance, eval(sfw[instance].connection.responseText));
}
};

function sfwQuery(instance) //设置 URL 提交action
{
sfwThrottle(instance);
var phrase = sfw[instance].inputContainer.value;
if(phrase == "" || phrase == sfw[instance].previous) return;
sfw[instance].previous = phrase;
var url = sfw[instance].action + "?type=" + sfw[instance].name + "&q=" + phrase.trim().encode();
// alert("url:"+url);
sfwRequest(instance, url);
};

function sfwRequest(instance, url)
{
   // alert("url:"+url);
if(sfw[instance].connection = sfwCreateConnection())
{
  sfw[instance].connection.onreadystatechange = function() { sfwProcessRequest(instance) };

  sfw[instance].connection.open("GET", url, true);
  sfw[instance].connection.send(null);
}
else
{
  sfw[instance].proxy.location.replace(url);
  sfwProcessProxyRequest(instance);
}
};

function sfwSelectThis(instance, index)
{
if(sfw[instance].columns > 1 && sfw[instance].capture > 1)
sfw[instance].hiddenInput.value = sfw[instance].suggestions[sfw[instance].suggestionsIndex][sfw[instance].capture - 1];

if(!isNaN(index)) { sfw[instance].suggestionsIndex = index; }

var selection = sfw[instance].suggestions[sfw[instance].suggestionsIndex];
if(sfw[instance].columns > 1) { selection = selection[0]; }
sfw[instance].inputContainer.value = selection;
sfw[instance].previous = selection;
sfwHideOutput(instance);
};

function sfwSelectNext(instance)
{
sfwSetTextSelectionRange(instance);
if(typeof sfw[instance].suggestions[(sfw[instance].suggestionsIndex + 1)] != "undefined")
{
  if(typeof sfw[instance].suggestions[sfw[instance].suggestionsIndex] != "undefined")
   document.getElementById(sfw[instance].name + "_suggestions[" + sfw[instance].suggestionsIndex + "]").className = "SuggestFramework_Normal";
  sfw[instance].suggestionsIndex++;
  sfwHighlight(instance, sfw[instance].suggestionsIndex);
}
};

function sfwSelectPrevious(instance)
{
sfwSetTextSelectionRange(instance);
if(typeof sfw[instance].suggestions[(sfw[instance].suggestionsIndex - 1)] != "undefined")
{
  if(typeof sfw[instance].suggestions[sfw[instance].suggestionsIndex] != "undefined")
   document.getElementById(sfw[instance].name + "_suggestions[" + sfw[instance].suggestionsIndex + "]").className = "SuggestFramework_Normal";
  sfw[instance].suggestionsIndex--;
  sfwHighlight(instance, sfw[instance].suggestionsIndex);
}
};

function sfwSetTextSelectionRange(instance, start, end)
{
if(!start) var start = sfw[instance].inputContainer.value.length;
if(!end) var end = sfw[instance].inputContainer.value.length;

if(sfw[instance].inputContainer.setSelectionRange)
{
  sfw[instance].inputContainer.setSelectionRange(start, end);
}
else if(sfw[instance].inputContainer.createTextRange)
{
  var selection = sfw[instance].inputContainer.createTextRange();
  selection.moveStart("character", start);
  selection.moveEnd("character", end);
  selection.select();
}
};

function sfwShowOutput(instance)
{
if(typeof sfw[instance].suggestions != "undefined" && sfw[instance].suggestions.length)
sfw[instance].outputContainer.style.display = "block";
};

function sfwSuggest(instance, list)
{
sfw[instance].suggestions = list;
sfw[instance].suggestionsIndex = -1;
sfw[instance].outputContainer.innerHTML = "";

sfwShowOutput(instance);
};

function sfwThrottle(instance)
{
setTimeout("sfwQuery(" + instance + ")", sfw[instance].delay);
};

function initializeSuggestFramework()
{
function getAttributeByName(node, attributeName)
{
  if(typeof NamedNodeMap != "undefined")
  {
   if(node.attributes.getNamedItem(attributeName))
    return node.attributes.getNamedItem(attributeName).value;
  }
  else
  {
   return node.getAttribute(attributeName);
  }
}

var inputElements = document.getElementsByTagName("input");

try
{
  for(var instance = 0; instance < inputElements.length; instance++)
  {
   if(getAttributeByName(inputElements[instance], "name") &&
      getAttributeByName(inputElements[instance], "type") == "text" &&
      getAttributeByName(inputElements[instance], "action"))
   {
    sfw[instance] = new Object();
    sfw[instance].action = getAttributeByName(inputElements[instance], "action");
    sfw[instance].capture = 1;
    sfw[instance].columns = 1;
    sfw[instance].delay   = 1000;
    sfw[instance].heading = false;
    sfw[instance].name    = getAttributeByName(inputElements[instance], "name");

    if(getAttributeByName(inputElements[instance], "capture"))
     sfw[instance].capture = getAttributeByName(inputElements[instance], "capture");
    if(getAttributeByName(inputElements[instance], "columns"))
     sfw[instance].columns = getAttributeByName(inputElements[instance], "columns");
    if(getAttributeByName(inputElements[instance], "delay"))
     sfw[instance].delay = getAttributeByName(inputElements[instance], "delay");
    if(getAttributeByName(inputElements[instance], "heading"))
     sfw[instance].heading = getAttributeByName(inputElements[instance], "heading");

    sfwCreate(instance);
   }
  }
}
catch(e) {}
};

SuggestFramework.CSS 代码

.SuggestFramework_List
{
border: 1px solid #FAFAFA;
border-top: 0px;
}

.SuggestFramework_Heading
{
padding: 0px 1px 0px 1px;
background-color: #FAFAFA;
color: #FF0000;
font-weight: bold;
}

.SuggestFramework_Highlighted
{
padding: 0px 1px 0px 1px;
background-color: Highlight;
color: HighlightText;
}

.SuggestFramework_Normal
{
padding: 0px 1px 0px 1px;
background-color: #FFFFFF;
color: #000022;
}