关于选择页面的设计模式

新建网页 1

b/s难免会用到选择页面：比如选客户，选员工，选产品等等，对于这些，我们通常的方法是打开一个新窗口，上面会有上述内容的列表，然后我们勾选一下返回就可以了，通过一段时间的使用，渐渐发现了某些弊端：

弹出窗口对于有些机器来说会很慢

频繁选择使客户失去耐心

我对我要选的内容很熟悉，为什么还要给我一大堆的列表

而且这些列表显示的时候很慢

可能在我们开发者来说，并不是特别麻烦的，但是对于测试人员和客户来说，是个天大的灾难，他们不得不仅仅为了选一个他熟悉的记录花费大量的时间。

由此，我在新的项目开始的时候注意到了这个问题，通过试验，得出了一个比较好的办法，那就是－－－－模拟outlook填写email地址的方式。

由于是b/s系统，如果需要实现这个问题我们就要用到xmlhttp来无刷新读取记录。废话不多说，完整的思路是这样：

有一个text的输入框，允许客户填写选择的内容，比如：他要选客户，那就填写他的客户的助记码

按回车后，xmlhttp把这个助记码传回服务器端，执行查询，并将结果以xml的形式返回到前端（浏览器）。

前端浏览器通过js解析，如果有唯一记录，那么就将正确的客户名称加下划线（表示通过验证，客户存在）赋值给文本框，

如果是多个记录，文本框隐藏，显示一个下拉的列表让操作人选择一个，并加选中内容加下划线赋给文本框，文本框显示，下拉列表隐藏。

如果没有记录，那么显示一个消息框。

通过这样处理，就很好的提高了操作效率，提高了软件的人性化的程度。

　

下面是demo的代码：

function run(obj){
if (document.all.code.value==''||document.all.code.value==' '){alert("您需要运行的代码为空!");obj.focus()}
else{var winEx = window.open("", "winEx", "width=800,height=600,resizable=yes,top=0,left=0");
winEx.document.write(document.all.code.value);winEx.document.close()}}

请输入公司名称

function Search(){
document.all.layer1.style.textDecoration= "none"
if(event.keyCode==13){
switch(document.all.layer1.value){
case "M" :
document.all.S1.style.display=""
break
case "KFC" :
document.all.layer1.style.textDecoration="underline"
document.all.layer1.value = "肯德鸡"
break;
default :
if(document.all.layer1.value!=""){
alert("没找到该公司")
document.all.layer1.value =""
}
}
}
}
function setValue(obj){
strText = obj.options[obj.selectedIndex].text
document.all.layer1.value =strText
document.all.layer1.style.textDecoration="underline"
obj.style.display="none"
}

请输入公司名称

上海麦当老
南京麦当老
北京麦当老

...
...

body,td,a { font-size: 9pt; color: #330000; text-decoration: none}
.aa {filter:alpha(opacity=100)}

层样式的选择窗口	0 2 r
浏览器不支持嵌入式框架，或被配置为不显示嵌入式框架。

请试着输入“M”或者“KFC”

function MoveStart(obj){
obj.setCapture();
var ox=event.clientX;
var oy=event.clientY;
function obj.onmousemove(){
if(obj){
var nx=event.clientX;
var ny=event.clientY;
obj.style.posLeft+=nx-ox;
obj.style.posTop+=ny-oy;
ox=nx;
oy=ny;
}
}
function obj.onmouseup(){
var nx=event.clientX;
var ny=event.clientY;
var stop=0;
if(obj){
obj.releaseCapture();
}
obj=false;
}
obj.ondblClick = null;
}