yinlongfei
2017-02-20 08:59
采纳率: 100%
浏览 948

asp和jQ仿百度输入提示,点击无法选择

前端代码:

 <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="style/jquery-1.11.1.min.js"></script>
<style>
body {
    background-color:#FFFFFF;
     }
.STYLE1 {color: #FF0000}
.nocartlist {
    display:none;
    PADDING-top: 0px;
    z-index: 9999;
    position: absolute;
            }
.cartlist {
    background-color: #CCCCCC;
          }
.cartlistm {
    background-color: #FFFFFF;
           }
</style>

<script language=javascript>
$(document).ready(function(){  //文档就绪
    x=$("#huiyuan2").offset();        //取输入框的位置
    x.top=x.top+$("#huiyuan2").height()+10; 
    $("#minicart2").offset(x);    //显示区位置为输入框位置向下10,左右对齐
    $("#huiyuan2").focus(function(){  //输入框获得焦点
        $("#minicart2").show();        //显示区 显示
        });
    $("#huiyuan2").keyup(function(){   //输入框 键盘抬起
        txt=$("#huiyuan2").val();      //取输入框的值
        txt2=$("#gys_lx").val();       //取选择框的值
        $("#mycartlist").load("style/aa.asp", {gyslx:txt2,keyword:txt});
        //后台查数据库得到经销商的名称和地址,并返回到显示列表
        $("#gys_lx").focus();//发现问题后添加
        $("#huiyuan2").focus();//发现问题后添加 切换焦点
        });
    $("#huiyuan2").blur(function(){     //输入框失去焦点 
        $("p").mousedown(function(){         //鼠标点击显示列表中的<p>
            x=$(this).attr("name");             //取显示列表<p>的name
            $("#huiyuan2").val($("span#"+x).text()); //根据name取对应<span>中的文字给输入框
            $("#huiyuan").val(x);  //把name给隐藏输入框
            });
        $("#minicart2").hide();  //显示区 隐藏
        });
});
</script>
</head>

<body>
      经销商类型:
      <select id="gys_lx" name="gys_lx" >
        <option value="0" >所有类型</option>
        <option value="代理" >所有代理</option>
        <option value="分销" >所有分销</option>
        <option value="洒店" >所有洒店</option>
      </select>

      经销商名称:
 <span>  <input id="huiyuan2" type="text" name="huiyuan2" size="38" value="" >
      <input type="button" value="清空" class="button" onClick="huiyuan2.value='';huiyuan.value='';">
      <input id="huiyuan" type="hidden" name="huiyuan" value="">
    <div id="minicart2" class="nocartlist">                         
         <div style="width:262px;height:auto;background-color: #ffffff;border-right:#cccccc 2px solid;border-left:#cccccc 2px solid;border-bottom:#cccccc 2px solid;line-height:38px;text-align:left;) ">    
             <div id="mycartlist" style=" padding-top:1px">
             </div>
        </div>
    </div>
 </span>

</body>
</html>

后台代码,去掉了数据库部分,是生成10条提示

<%@ CODEPAGE=65001 %> 
<% Response.CodePage=65001%> 
<%Session.Codepage=65001%>
<% Response.Charset="utf-8" %> 

<%
gyslx=request("gyslx")
keyword=request("keyword")
restkk=""
if keyword="" then
  response.write restkk
  response.End()
end if
x=1
  do while x<10
     restkk=restkk&"<p class='cartlist' name='"&x&"' onMouseOver='this.className=&#34;cartlistm&#34;' onMouseOut='this.className=&#34;cartlist&#34;'><span id='"&x&"' style='width:100'>名称:"&x&gyslx&"</span><span>地址:"&x&"</span></p>"
  x=x+1
  loop
  response.write restkk
%> 

现在的问题是,输入字符后,可以出现提示内容,但是鼠标点击后,所选内容无法写到输入框中,但是使输入框失去焦点后,再点击输入框后就可以选择。如果按下键盘出现新的提示后又无法选择了。
如果在代码中让输入框失去焦点再得到焦点,好像又不行。
下面是测试网页,可看到错误状态。
测试网页

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • 已采纳

    你是输入框失去了焦点才给自动完成加载的p添加mousedown事件啊,没有blur肯定没有mousedown事件就无法设置控件值了,blur给p绑定事件放到load成功回掉里面

       $("#huiyuan2").keyup(function(){   //输入框 键盘抬起
            txt=$("#huiyuan2").val();      //取输入框的值
            txt2=$("#gys_lx").val();       //取选择框的值
            $("#mycartlist").load("style/aa.asp", {gyslx:txt2,keyword:txt},function(){
    
    //////////////////////////////////////////
            $("p").mousedown(function(){         //鼠标点击显示列表中的<p>
                x=$(this).attr("name");             //取显示列表<p>的name
                $("#huiyuan2").val($("span#"+x).text()); //根据name取对应<span>中的文字给输入框
                $("#huiyuan").val(x);  //把name给隐藏输入框
                });
            $("#minicart2").hide();  //显示区 隐藏
    
    
    //////////////////////////////////////////
    
    
    
                    });
            //后台查数据库得到经销商的名称和地址,并返回到显示列表
            $("#gys_lx").focus();//发现问题后添加
            $("#huiyuan2").focus();//发现问题后添加 切换焦点
            });
    
    打赏 评论

相关推荐 更多相似问题