Dwr轻松实现google的suggest功能

2024-02-16 01:18
文章标签 实现 功能 轻松 google dwr suggest

本文主要是介绍Dwr轻松实现google的suggest功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

今天将我正在进行开发的系统中注入了ajax的suggest功能，虽然不像我看的框架那样通用，但我感觉即简单又好用，我是将dwr框架引入程序中，在javascript中调用类方法查询到oracle数据库的数据，dwr真是快捷方便。下面是实现代码：
以下是SuggestControl.js
[code]
var arrOptions = new Array();
var strLastValue = "";
var bMadeRequest;
var theTextBox;
var objLastActive;
var currentValueSelected = -1;
var bNoResults = false;
var isTiming = false;
window.onload = function() {
var elemSpan = document.createElement("span");
elemSpan.id = "spanOutput";
elemSpan.className = "spanTextDropdown";
document.body.appendChild(elemSpan);
document.forms[0].consignOrgName.obj =
SetProperties(document.forms[0].consignOrgName,
document.forms[0].consignOrgValue,'',true,true,true,true,
"没有匹配的名称",false,true);
}
function SetProperties(xElem, xHidden, xserverCode, xignoreCase, xmatchAnywhere,
xmatchTextBoxWidth, xshowNoMatchMessage, xnoMatchingDataMessage, xuseTimeout,
xtheVisibleTime) {
var props = {
elem: xElem,
hidden: xHidden,
serverCode: xserverCode,
regExFlags: ((xignoreCase) ? "i" : ""),
regExAny: ((xmatchAnywhere) ? "^" : ""),
matchAnywhere: xmatchAnywhere,
matchTextBoxWidth: xmatchTextBoxWidth,
theVisibleTime: xtheVisibleTime,
showNoMatchMessage: xshowNoMatchMessage,
noMatchingDataMessage: xnoMatchingDataMessage,
useTimeout: xuseTimeout
};
AddHandler(xElem);
return props;
}
var isOpera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
function AddHandler(objText){
objText.onkeyup = GiveOptions;
objText.onblur = function(){
if(this.obj.useTimeout)StartTimeout();
}
if(isOpera)objText.onkeypress = GiveOptions;
}
function GiveOptions(e){
var inkey = -1;
if(window.event){
inkey = event.keyCode;
theTextBox = event.srcElement;
}
else{
inkey = e.which;
theTextBox = e.target;
}
if(theTextBox.obj.useTimeout){
if(isTiming)EraseTimeout();
StartTimeout();
}
if(theTextBox.value.length == 0 && !isOpera){
arrOptions = new Array();
HideTheBox();
strLastValue = "";
return false;
}
if(objLastActive == theTextBox){
if(inkey == 13){
GrabHighlighted();
theTextBox.blur();
return false;
}
else if(inkey == 38){
MoveHighlight(-1);
return false;
}
else if(inkey == 40){
MoveHighlight(1);
return false;
}
}
if(objLastActive != theTextBox ||
theTextBox.value.
indexOf(strLastValue) != 0 ||
((arrOptions.length == 0 ||
arrOptions.length == 15)
&& !bNoResults) ||
(theTextBox.value.length
<= strLastValue.length)){

objLastActive = theTextBox;
bMadeRequest = true;
TypeAhead(theTextBox.value);
}
else if(!bMadeRequest){
BuildList(theTextBox.value);
}
strLastValue = theTextBox.value;
}
function TypeAhead(xStrText) {
arrOptions = [];
GetData.getData(xStrText, BuildList);
bMadeRequest = false;
}
function CreateArray(ajaxResponse){
for(var index in ajaxResponse){

var newtext = ajaxResponse[index].fcname;
var newval = ajaxResponse[index].fcode;
arrOptions.push(new Array(newval,newtext));
}
}
function BuildList(theText){
CreateArray(theText);
SetElementPosition(theTextBox);

var theMatches = MakeMatches(strLastValue);
theMatches = theMatches.join().replace(/\,/gi,"");
if(theMatches.length > 0){
document.getElementById("spanOutput").innerHTML = theMatches;
document.getElementById("OptionsList_0").className = "spanHighElement";
currentValueSelected = 0;
bNoResults = false;
}
else{
currentValueSelected = -1;
bNoResults = true;
if(theTextBox.obj.showNoMatchMessage)
document.getElementById("spanOutput").innerHTML =
"<span class='noMatchData'>" + theTextBox.obj.noMatchingDataMessage + "</span>";
else
HideTheBox();
}
}
function SetElementPosition(theTextBoxInt){
var selectedPosX = 0;
var selectedPosY = 0;
var theElement = theTextBoxInt;
if(!theElement) return;
var theElemHeight = theElement.offsetHeight;
var theElemWidth = theElement.offsetWidth;
while(theElement != null){
selectedPosX += theElement.offsetLeft;
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
xPosElement = document.getElementById("spanOutput");
xPosElement.style.left = selectedPosX;
if(theTextBoxInt.obj.matchTextBoxWidth)
xPosElement.style.width = theElemWidth;
xPosElement.style.top = selectedPosY + theElemHeight;
xPosElement.style.display = "block";
if(theTextBoxInt.obj.useTimeout){
xPosElement.onmouseout = StartTimeout;
xPosElement.onmouseover = EraseTimeout;
}
else{
xPosElement.onmouseout = null;
xPosElement.onmouseover = null;
}
}
var countForId = 0;
function MakeMatches(xCompareStr){
countForId = 0;
var theMatch;
var matchArray = new Array();
var regExp = new RegExp(theTextBox.obj.regExAny +
xCompareStr,theTextBox.obj.regExFlags);
for(i = 0; i < arrOptions.length; i++){
if(arrOptions[i][1] != null)
theMatch = arrOptions[i][1].match(regExp);
if(theMatch){
matchArray[matchArray.length]=
CreateUnderline(arrOptions[i][1],xCompareStr,i);
}
}
return matchArray;
}
function CreateUnderline(xStr,xTextMatch,xVal){
var undeStart = "<span class='spanMatchText'>";
var undeEnd = "</span>";
var aStart;
var matchedText;
var xreplace='';
var selectSpanStart = "<span style='width:100%;display:block;'class='spanNormalElement'
οnmοuseοver='SetHighColor(this)'";
var selectSpanEnd = "</span>";
selectSpanMid = "οnclick='SetText("+xVal+")'" +"id='OptionsList_" + countForId +
"' theArrayNumber='"+xVal+"'>";
var regExp = new RegExp(theTextBox.obj.regExAny +
xTextMatch,theTextBox.obj.regExFlags);
if(xStr != undefined){
aStart = xStr.search(regExp);
matchedText = xStr.substring(aStart,aStart + xTextMatch.length);
xreplace = xStr.replace(regExp,undeStart + matchedText + undeEnd);
countForId++;
}
return selectSpanStart + selectSpanMid + xreplace + selectSpanEnd;

}
function MoveHighlight(xDir){
if(currentValueSelected >= 0){
newValue = parseInt(currentValueSelected) + parseInt(xDir);
if(newValue > -1 && newValue < countForId){
currentValueSelected = newValue;
SetHighColor(null);
}
}
}
function SetHighColor(theTextBox){
if(theTextBox){
currentValueSelected =
theTextBox.id.slice(theTextBox.id.indexOf("_") + 1,
theTextBox.id.length);
}
for(i = 0; i < countForId; i ++){
document.getElementById('OptionsList_'+i).className =
'spanNormalElement';
}
document.getElementById('OptionsList_' +
currentValueSelected).className = 'spanHighElement';
}
function SetText(xVal){
theTextBox.value = arrOptions[xVal][1];
theTextBox.obj.hidden.value = arrOptions[xVal][0];
document.getElementById("spanOutput").style.display = "none";
currentValueSelected = -1;
}
function GrabHighlighted(){
if(currentValueSelected >= 0){
xVal = document.getElementById("OptionsList_" +
currentValueSelected).getAttribute("theArrayNumber");
SetText(xVal);
HideTheBox();
}
}
function HideTheBox(){
document.getElementById("spanOutput").style.display = "none";
currentValueSelected = -1;
EraseTimeout();
}
function EraseTimeout(){
clearTimeout(isTiming);
isTiming = false;
}
function StartTimeout(){
isTiming = setTimeout("HideTheBox()",theTextBox.obj.theVisiableTime);
}
[/code]
以下是class GetDate 及类方法，以获得要查询的数据
[code]
public GetData(){}

public List getData(String str){
List list = null;
Client cl = null;
try {
con = ConnectionHandler.getConnection("seaDataSource");
st = con.createStatement();
rs = st.executeQuery("select F_CODE,F_CNAME from view_collect where " +
"F_SHORT like '"+str+"%' and rownum <= 5");
while(rs.next()) {
cl = new Client();
cl.setFcode(rs.getString("F_CODE"));
cl.setFcname(rs.getString("F_CNAME"));
// System.out.println("---"+cl.getFcname());
if(list==null)list = new ArrayList();
list.add(cl);
cl = null;
}
} catch (Exception e) {
e.printStackTrace();
}finally {
try {
rs.close();
st.close();
con.close();
} catch (Exception e)
{e.printStackTrace();}
}
return list;
}
[/code]
以下是dwr.xml中的配置
[code]
<dwr>
<allow>
<create creator="new" javascript="GetData">
<param name="class" value="com.fmslite.seaexp.dao.GetData" />
</create>
<convert converter="bean" match="com.fmslite.seaexp.pojo.Client"/>
</allow>
</dwr>
//*********************以下是web.xml中的配置********************************//
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
[/code]
以下是css的sheet文件
[code]
.span.spanTextDropdown {
position: absolute;
top: 0px;
left: 0px;
width: 150px;
z-index: 101;
background-color: #F6EEFF;
border: 1px solid #8E8DAA;
padding-left: 2px;
overflow: visible;
display: none;
font-size:8pt
}
.span.spanMatchText {
color:#B8B8FF;
font-weight: bold;
font-size:8pt
}
.span.spanNormalElement {
background: #F6EEFF;
font-size:8pt
}
.span.spanHighElement {
font-size:8pt;
background: #A2A1C5;
color: #FFFFFF;
cursor: pointer
}
.span.noMatchData {
font-weight: bold;
color: #0000ff;
font-size:8pt
}
[/code]
如能配置正确以上文件及路径，即可轻松实现Suggest的基本功能。

这篇关于Dwr轻松实现google的suggest功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/713093。

相关文章

闲置电脑也能活出第二春？鲁大师AiNAS让你动动手指就能轻松部署

闲置电脑也能活出第二春？鲁大师AiNAS让你动动手指就能轻松部署

对于大多数人而言，在这个“数据爆炸”的时代或多或少都遇到过存储告急的情况，这使得“存储焦虑”不再是个别现象，而将会是随着软件的不断臃肿而越来越普遍的情况。从不少手机厂商都开始将存储上限提升至1TB可以见得，我们似乎正处在互联网信息飞速增长的阶段，对于存储的需求也将会不断扩大。对于苹果用户而言，这一问题愈发严峻，毕竟512GB和1TB版本的iPhone可不是人人都消费得起的，因此成熟的外置存储方案开
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
【数据结构】——原来排序算法搞懂这些就行，轻松拿捏

【数据结构】——原来排序算法搞懂这些就行，轻松拿捏

前言：快速排序的实现最重要的是找基准值，下面让我们来了解如何实现找基准值 基准值的注释：在快排的过程中，每一次我们要取一个元素作为枢纽值，以这个数字来将序列划分为两部分。 在此我们采用三数取中法，也就是取左端、中间、右端三个数，然后进行排序，将中间数作为枢纽值。 快速排序实现主框架： //快速排序 void QuickSort(int* arr, int left, int rig
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注，收藏不迷路💖 Kubernetes的PodSecurityPolicy（PSP）是一个关键的安全特性，它在Pod创建之前实施安全策略，确保P
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2