模仿 百度的查询下拉框

 

 

quickQuery.rar 效果图：

 

嘿嘿。。自己看吧。。。

 

 ==============================下面是优化过的=================

 

 下面的代码是开发中可能使用到的，

 

 解决了：

 1、名称和右边的快速检索 的列宽等问题             ----------------->          图1

 2、当名称长度超过宽度的时候，使用.....代替     ----------------->          图2

 

 如图1：

 

如图2：

 
 

 

以上是效果图：

 

我在贴出一些我开发的代码，仅供参考：

 

功能：  当新增项目的时候，在委托方“联系人”中实现 模糊查询下拉，当下拉中找不到联系人的时候再新增人员到下拉中

 

实现方法（我的是struts2）：

1、 当界面挑战到 新增项目界面的时候 从数据库中查询 联系人 并绑定到 下拉中

var arriveCityArray = new Array("","",""); 
		<s:action name="qyxxk_queryQyxx" namespace="/busin"  var="qy" executeResult="false" ></s:action>
		<s:iterator id="item" value="#qy.list" status="st" > 
			arriveCityArray[<s:property value="#st.index" />] = new Array("<s:property value="#item.customId" />", "<s:property value="#item.customJg" />", "<s:property value="#item.customZjm" />");
		</s:iterator>
		 
		window.onload = function(){
			//$quickQuery(arriveCityArray);
			$quickQuery({ "customJg": arriveCityArray}, {"viewContentNum": 15, "subSign": "/"} );
		} 

 

2、当下拉中找不到联系人的时候，点击旁边的“新增人员”，当人员新增成功后，在手动添加人员信息到下拉中

function selectChange(id,zjm,name){
		   //alert(arriveCityArray.length);
	       arriveCityArray[arriveCityArray.length] = new Array(id, name, zjm);	
	       $quickQuery({ "customJg": arriveCityArray}, {"viewContentNum": 15, "subSign": "/"} );
		}

 

 

 

缺点是： 

 

目前还不能使用 键盘的 上下 方向键来选取内容

 

 

我发现的就这个了。。你们如果在开发使用中发现什么问题请大家 留言讨论啊。。一起慢慢的优化。改进！

评论

4 楼 yangpanwww 2011-02-17  

obnijeh 写道

input里面键盘上下不能用.

大哥。。
你的第一个问题：
  你是怎么用的啊....下拉的时候  哪里有逗号？  我没看到啊

第二个问题：
 
  键盘的上下是可以使用的,,,你按上下键的时候。。注意下拉里面的内容是在动的

3 楼 obnijeh 2011-02-16  

input里面键盘上下不能用.

2 楼 obnijeh 2011-02-16  

下拉的时候,有逗号呀.怎么解决?

1 楼 obnijeh 2011-02-14  

谢谢.看到了.不错.