点击商品评价 就定位到下面了

今天在项目中碰到一个需求，就是在input输入框中录入数据时（名字），假如敲入了一部分，在数据库中存在已有的姓名的前缀与之匹配，就弹出一个 google页面那种效果的下拉框，把相关的姓名列出来供他选择。可以用箭头上下选择，也可以用鼠标选择。这样可以提高录入的效率。

    输入框的布局如下：

   

  最终的效果如下：

 

 

  表单中输入框的html代码为:

<tr><td>发件人</td><td><input type="text" name="sendername" id="sendername" value=""/></td></tr>

 

为了在输入一些内容时，能够显示出那个选择框，我们要建立一个div,初始时不可见，当需要时就显示出来，并且将它移动到正确的位置。这个div采用的定位为绝对定位，这样就可以在整个页面用left和top来定位了，z-index为99，这样就可以盖住下面的东西。选择框的div为:

<div id="helper" class="gac_m" style="visibility:hidden;" width="100%">

</div>

 gac_m的css定义为：

.gac_m {
background:white none repeat scroll 0 0;
border:1px solid black;
cursor:default;
font-size:13px;
line-height:17px;
margin:0;
position:absolute;
z-index:99;
width:100px;
left:10px;
top:10px;
}

 当需要显示时，我们需要将id为helper的div移动到正确的位置，这个位置就是input输入框的正下方，left即为input的相对页面左边的位移,top即为input相对页面上边的位移加上input本身的高度。现在的问题是怎么取得一个元素的相对页面的绝对位置，这个可以通过offsetparent取的父亲结点递归的来算。下面函数getabsposition用来取得元素obj的绝对位置，gettable(obj)用来把id为helper的div定位到obj正下方:

function getabsposition(obj) {
    var r = {
        left: obj.offsetleft,
        top : obj.offsettop
    };
    r.left = obj.offsetleft;
    r.top  = obj.offsettop;
    if(obj.offsetparent) {
        var tmp = getabsposition(obj.offsetparent);
        r.left += tmp.left;
        r.top  += tmp.top;
    }
    return r;
  }
  function gettable(obj) {
    var pos = getabsposition(obj);
    pos.top += obj.offsetheight;
    document.getelementbyid('helper').style.top = pos.top + "px";
    document.getelementbyid('helper').style.left = pos.left + "px";
    document.getelementbyid('helper').style.width = obj.offsetwidth + "px";
    document.getelementbyid('helper').style.visibility = '';
  }

现在可以定位并且显示id为helper的div了，下面的问题是当输入框中的内容改变时，采用ajax去服务器取得数据，然后更新div中的内容，并且显示出来。那么怎么侦测输入框中的内容改变了呢？假如采用onchange事件，只有当输入框失去焦点时才会触发，所以我们只有采用定时器的方式了，每隔一个时间片检查一下输入框的值，假如值改变了，就执行更新过程。下面checkvalue函数就是用来给定时器的函数，用来检查输入框的内容是否改变，getnameresponse是ajax的回调函数，用来对服务器传回的json数据解码并且以一定的方式显示在div中。

function checkvalue() {
    var nowvalue = document.getelementbyid('sendername').value;
    if(prevalue != nowvalue) {
        ajax.call('useradv.php?act=getsendername&name='+nowvalue,'',getnameresponse, 'get', 'json');
    }
    prevalue = nowvalue;
    settimeout(checkvalue,100);
  }

function getnameresponse(result) {
    var info = result.content;

  var html = '<table width="100%">';

for(var i = 0;i < info.length; i++) {

        html += '<tr id="tr' + (i+1) +'" οnmοuseοver="choosetr(' + (i+1) +');" οnclick="selecttr();">'
               + '<td colspan="2">' + info[i].sendername + '</td></tr>';

    }

    html += '<td align="left"><font color="red">按空格键选择</font></td>'
           +'<td align="right"><a href="#" οnclick="document.getelementbyid(/'helper/').style.visibility=/'hidden/';">'+
           '关闭</a></td></tr></table>';
   

document.getelementbyid('helper').innerhtml = html;
    if(info.length > 0) {
        gettable(document.getelementbyid('sendername'));
    }else{
        document.getelementbyid('helper').style.visibility ='hidden';
    }

 }

其中tr的classname为gca_b表示该行被选中，其css定义为:

.gac_b {

background:#3366cc !important; color:white;

}

 

下面需要解决的问题是用向上和向下的按键来在选择框中选择，这样就需要检测键盘按键了，可以直接通过document.onkeydown来注册按键检测函数，当按下向上和向下的键时，就上下移动选中的行，函数choosetr(nextid)用来选择第nextid行，当然需要记录nowid为前面选中的行，然后selecttr()是当按了空格键或者用鼠标点击了后模拟选中的动作，用选中的值来填充input。

var nowid = 0;
function selecttr() {
    try
    {
        if(document.getelementbyid('helper').style.visibility == 'hidden') return;
        document.getelementbyid('sendername').value = 
document.getelementbyid('tr'+nowid).cells[0].innerhtml;
        settimeout(function(){

                        document.getelementbyid('sendername').value

                        =utils.trim(document.getelementbyid('sendername').value);},50);      

        falg = false;

        nowid = 0;
        var eles = document.getelementsbyname('trname');
        for(var i = 0; i < eles.length; i++) {
            eles[i].classname = '';
        }

        document.getelementbyid('helper').style.visibility ='hidden';

    }

catch (e)

    {

    }

  }

document.onkeydown = function(e) {    

 var keycode;

try

    {

        keycode = event.keycode;

    }

    catch (err)

    {

        keycode = e.keycode;

    }

    if(keycode == 40) {

        //按了向下的键

        choosetr(nowid+1);

    } else if(keycode == 38) {

        //按了向上的键
        choosetr(nowid-1);

    } else if(keycode == 32) {

        selecttr();

    }

}

 function choosetr(nextid) {

     var len = 0;

     do

     {

        try

        {

            var obj = document.getelementbyid('tr'+(len+1));

   if(obj) len++; else break;

}

   catch (e)

   {

     break;

        }

     }while(1);

  if(nextid > len) nextid = 1;
     if(nextid < 1) nextid = len;
     if(nowid >=1 && nowid <= len) {
         document.getelementbyid('tr' + nowid).classname = '';
     }

     document.getelementbyid('tr' + nextid).classname = 'gac_b';

     nowid = nextid;

  }

  settimeout(checkvalue,100);

 这样就可以了，最后需要注重的是有个小问题：浏览器自带的自动历史选择下拉框会与我们做的冲突，解决方法就是设置input的oncomplete="off"。

最后贴一下服务器端的php程序：

elseif ($action == 'getsendername') {
    $name = trim($_get['name']);
    $rows = array();
    if(strlen($name) > 0) {
        $sql = "select distinct sendername from ".$globals['ecs']->table('useradv').
               " where sendername like '$name%' and sendername != '$name' limit 0,10";
        $rows = $globals['db']->getall($sql);
    }
    include_once(root_path . 'includes/cls_json.php');
    $json = new json();
    $result = array('error'=>0, 'message'=>'', 'content'=>'');
    $result['content'] = $rows;
    die($json->encode($result));
}