经过一个星期的煎熬,终于把基于Ajax的输入提示功能实现了。太痛苦了,写Javascript的感觉就跟用NotePad来写代码一样,没有智能提示、弱类型、难调试……总之是太折磨人了。
本来自己写了一个比较简单的,但是由于我的页面上需要多个输入框,还要可以动态增加输入框,要把传回来的结果set入多个输入框,由于是使用的Struts标签库,<html:text>还没有id属性,让这个问题复杂了不少。
需求是这样的:
有一个页面,需要录入货品信息,货品有id,编号,名称,单位,单价,规格等属性,每个货品信息在表格中有一行,一行中有多个输入框,用于输入货品信息。在输入货品编号的时候,应该访问后台的商品信息库,寻找以前是否有输入过该编号的货品,如果有,把编号返回。支持用鼠标点击,键盘回车等方法选择货品,选择后应该把货品信息显示到各个输入框中供用户修改。如果该货品在商品信息库中标记为敏感商品,要作出提示。一个编号可以有多个货品。
改了3天代码,终于决定破釜沉舟,删掉重做。修改了《Ajax in Action》中的代码,Ajax in Action中的代码有些地方有错误,不仔细检查一遍还真不太容易发现。书中后台使用C#,前台是使用Rico来向某个url传参数的形式进行Ajax通信。返回的response类似:
<ajax-response>
<response type='object' id='field1_updater'>
<matches>
<text>XXX</text>
<value>XXX</value>
</matches>
</response>
</ajax-response> 不过我不想写JSP或者Servlet,所以用了DWR,直接用spring中的BO把结果传回来:
cargobaseService.getByNumberAndCompany(this.lastRequestString,this.company,function(ajaxResponse){
//
}); cargobaseService是使用DWR创建的Javascript对象:
dwr.xml:
<dwr>
<allow>
<create creator="spring" javascript = "cargobaseService">
<param name="beanName" value="cargobaseService"/>
</create>
<convert match="com.gdnfha.atcs.cargobase.model.*" converter="bean"></convert>
</allow>
</dwr>
返回为下面对象的数组
var cargoModel = {
cargoCompany: XXX,
cargoCurrency: XXX,
cargoDestination: XXX,
cargoId: XXX,
cargoImpose: XXX,
cargoName: XXX,
cargoNumber: XXX,
cargoSize: XXX,
cargoUnit: XXX,
cargoUnitPrice: XXX,
sensitive: true|false
} Javascript代码如下:
TextSuggest = Class.create();
TextSuggest.prototype = {
//构造函数
initialize: function(anId,company, url, options) {
this.id = anId;
this.company = company;
var browser = navigator.userAgent.toLowerCase();
this.isIE = browser.indexOf("msie") != -1;
this.isOpera = browser.indexOf("opera")!= -1;
this.textInput = $(this.id);
this.suggestions = new Array();
this.setOptions(options);
this.injectSuggestBehavior();
},
//设置参数
setOptions: function(options) {
this.options = {
suggestDivClassName: 'suggestDiv',
suggestionClassName: 'suggestion',
matchClassName : 'match',
matchTextWidth : true,
selectionColor : '#b1c09c',
matchAnywhere : false,
ignoreCase : false,
count : 10
}.extend(options || {});
},
//注入输入提示行为
injectSuggestBehavior: function() {
if ( this.isIE )
this.textInput.autocomplete = "off";
//创建控制器
var keyEventHandler = new TextSuggestKeyHandler(this);
//主要是为了避免在按回车的时候把表单提交
new Insertion.After( this.textInput,
'<input type="text" id="'+this.id+'_preventtsubmit'+'" style="display:none"/>' );
new Insertion.After( this.textInput,
'<input type="hidden" name="'+this.id+'_hidden'+'" id="'+this.id+'_hidden'+'"/>' );
//创建div层
this.createSuggestionsDiv();
},
//处理输入信息
handleTextInput: function() {
var previousRequest = this.lastRequestString;
this.lastRequestString = this.textInput.value;
if ( this.lastRequestString == "" )
this.hideSuggestions();
else if ( this.lastRequestString != previousRequest ) {
//访问数据源
this.sendRequestForSuggestions();
}
},
//选择框上移
moveSelectionUp: function() {
if ( this.selectedIndex > 0 ) {
this.updateSelection(this.selectedIndex - 1);
}
},
//选择框下移
moveSelectionDown: function() {
if ( this.selectedIndex < (this.suggestions.length - 1) ) {
this.updateSelection(this.selectedIndex + 1);
}
},
//更新当前选择信息
updateSelection: function(n) {
var span = $( this.id + "_" + this.selectedIndex );
if ( span ){
//消除以前的样式
span.style.backgroundColor = "";
}
this.selectedIndex = n;
var span = $( this.id + "_" + this.selectedIndex );
if ( span ){
//更新新样式
span.style.backgroundColor = this.options.selectionColor;
}
},
//发送请求
sendRequestForSuggestions: function() {
if ( this.handlingRequest ) {
this.pendingRequest = true;
return;
}
this.handlingRequest = true;
this.callDWRAjaxEngine();
},
//使用DWR访问后台
callDWRAjaxEngine: function() {
//保存当前对象指针
var tempThis = this;
cargobaseService.getByNumberAndCompany(this.lastRequestString,this.company,function(ajaxResponse){
tempThis.suggestions = ajaxResponse;
if ( tempThis.suggestions.length == 0 ) {
tempThis.hideSuggestions();
$( tempThis.id + "_hidden" ).value = "";
}else {
tempThis.updateSuggestionsDiv();
tempThis.showSuggestions();
tempThis.updateSelection(0);
分享到:
相关推荐
英文版教程,介绍了AJAX与Django框架的整合方案
javascript实例应用---Ajax与XMLHttpRequest.rarjavascript实例应用---Ajax与XMLHttpRequest.rarjavascript实例应用---Ajax与XMLHttpRequest.rar
javascript - ajax ppt javascript - ajax ppt
Django JavaScript Integration - AJAX and jQuery 英文无水印pdf pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如...
javascript-ajax基本属性方法详解,介绍javascript基础和ajax使用
Ajax-JavaScript-AJAX-JSON.zip,基本ajax json jquery,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况...
JavaScript案例-原生ajax
Ajax-wc-ajax-product-filter.zip,Woomerce AJAX产品过滤器-是一个插件,允许您根据类别、属性和价格轻松过滤产品。您可以对产品进行排序,导航到下一页和上一页,而无需重新加载该页。,ajax代表异步javascript和xml...
JS正则表达式详解-JavaScript-AJAX
Ajax-ember-ajax.zip,在ember应用程序中发出ajax请求的服务,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的...
一套很好的JavaScript教学视频,JavaScript-AJAX系列视频教程(完整无水印版)
JavaScript案例-原生ajax查询所有用户
JavaScript语言与Ajax应用(第二版)-源代码-董宁-51704128
Ra-Ajax is a Managed Ajax Library for ASP.NET (and hence Mono) which makes it possible for you to exclusively develop in a known ASP.NET WebControls environment without even caring about JavaScript at...
Ajax-magento2-ajax-cart-quick.zip,magento 2 ajax购物车扩展插件提供舒适的购物体验。客户可以很容易地选择可配置的选项并在弹出窗口中编辑项目,而不会浪费重新加载页面的时间。,ajax代表异步javascript和xml。它...
Ajax-magento2-ajax-layered-navigation.zip,ajax分层导航magento 2提供了一个过滤器列表,帮助您的客户以最短的方式搜索和获得他们最喜欢的产品。这个扩展应用了现代ajax技术来增强过滤系统,以提高用户对页面上每...
javascript源码100例-ajax程序员必备
JS-Ajax-jQuery笔记,学习笔记,JavaScript,JS-Ajax-jQuery笔记,学习笔记,JavaScript,
征服Ajax-javascript部分 ajax javascript课件 征服Ajax-javascript部分 ajax javascript课件