制作 类似 google 下拉框的用户自定义控件的实现思路

 如果做如下效果:
     

     听很多人说过 google 输入条件下拉筐输入时,自动出现一些匹配的信息,这种模式相当不错.
    
    E8.Net架构中 已经把种输入模式做成了控件,帮助系统改善各种录入项的用户体验.

    实现思路是: 
      1、组合 一个 TextBox 控件 、 一个DIV 控件 及 一个 SELECT | OPTION 控件
      2、通过javascript动态 指定 DIV控件的位置 及 SELECT |OPTION 控件 的 options 内容
      3、通过一些 事件脚本  onkeydown onmouseover....实现一些效果


    代码参考:
        
<input name='itemname' autocomplete="off" id='itemname' value='' onkeydown="focusToDropDown('itemsForDropdown')" onkeyup="getItemsForDropdown('itemsForDropdownLayer','itemsForDropdown','itemname','hidXml',this);" /> 
                
<div id='itemsForDropdownLayer' onmouseover="MoverToDropDownLayer('itemsForDropdown');" style='display: none; position:absolute; width:120px; left: 120; top: 90; z-index:2'
                 onmouseout
="hideMe('itemsForDropdownLayer','none');"> 
                
<select id='itemsForDropdown'  class="combo-list"  onkeydown="selectOnReturn('itemsForDropdownLayer','itemname',this);" onclick="getSelectedLabel('itemsForDropdownLayer','itemname',this);" 
                style
='width: 100%;' size='16'> <option value=''></option> </select> </div>

  部分脚本代码参考:
    
function getItemsForDropdown(id,idSelect,idText,idFields,obj)
    
{
     
         var 
object = document.getElementById(id);
         var objSelect 
= document.getElementById(idSelect);
          var objText 
= document.getElementById(idText);
          var objFields 
= document.getElementById(idFields);
          
         
          
          
       
         var i 
= 0;
         var j
=0;
         var sCurr 
= '';
         var soptText
='';
         var blnAdd 
= false;
         
         
         
         
if(objFields != null)
         
{  var sXml = objFields.value;
            xmlDroplst.loadXML(sXml);
         }

        
         
         
if(objText != null)
        
{
            sCurr 
= objText.value;
        }

        
        
if(object != null)
        
{
            
            var nodes 
= xmlDroplst.documentElement.childNodes;
            
            
if(objSelect != null)
            
{
               objSelect.options.length 
= 0;  //清除内容
               
               
for (i=0;i<nodes.length;i++)
               
{
                    soptText 
= nodes(i).getAttribute("Text");
                    blnAdd 
= false;
                    
if(sCurr == '')
                    
{
                       blnAdd 
= true;
                    }

                    
else
                    
{
                       
if(soptText.indexOf(sCurr) == 0)
                         
{
                            blnAdd
=true;
                         }

                    }

                    
if(blnAdd == true)
                    
{
                        objSelect.add(document.createElement(
"OPTION"));
                        objSelect.options[j].text
= soptText;
                        objSelect.options[j].value
=j; 
                        j
++;
                    }

                }



            }

            
            
            
object.style.left = absoluteLocation(obj, 'offsetLeft'- 2 + "px";       
            
object.style.top = absoluteLocation(obj, 'offsetTop'+ obj.offsetHeight + 2 + "px"
            
object.style.width = obj.offsetWidth + 2 + 'px';
            hideMe(id,
'');
        }

    }

    
    
//来源于XMLHTTP异步获取,



    E8.Net工作流平台为企业应用开发提供了一个起点,欢迎访问 :http://www.feifanit.com.cn/productFlow.htm
         
       

 

E8.Net工作流平台 提升企业战略执行力
http://www.feifanit.com.cn

E8在线,打造中小企业一站式管理软件租用平台

http://www.onlinee8.net

 

 

E8系列软件又添新成员 E8CRM 带流程管理的CRM : http://www.e8crm.com/

 


 

posted @ 2008-04-17 15:31  苏康胜  阅读(2280)  评论(1编辑  收藏  举报