关于类似于自动填充搜索框的DEMO

接了个单子，客户要求左边输入时，右边自动到数据库查出对应内容，如果是单个INPUT还好，这个是动态增加INPUT，不过都是一样，关键是思路

这里遇到最郁闷的问题，就是我用的JQ1.9 以前用的JQ1.3~1.7我擦。。绑定老是用live 结果1.9有个兼容，用jqobj.on('event',func)

JQ等一系列的框架太强大了。。。。开发效率高了，学习门槛低了，大家有什么感想呢。。。。

 

 

<html>
   <script src="jquery190.js"></script>
<body>
<div id="list" style="width:900px;background: brown;">
</div>
<br>
<div id="btn_domain" style="width:900px;background: #red;">
     <input type="button" value="add" id="btn_add">
</div>   
    
<script>
$(function(){
    
    var DemoBase = {
        //生成序列种子，为每一次ADD的input添加编号
        listNumber:0,
        bindEvt:function(){
            
            var obj = $("#s"+DemoBase.listNumber);
            var tObj = $("#t"+DemoBase.listNumber);
            
            obj.on('keyup',function(){
                  tObj.html($(this).val());
                 
            });
        }
        
    };
    
    //点击add按钮时
    $("#btn_add").click(function(){

        var htm = "<div id='left' style='float: left;width: 50%;height: 40px;'>cate:<input id=s"+DemoBase.listNumber+"></div>";
        htm+="<div id='right' style='float: left;width: 50%;height: 40px;'><span id=t"+DemoBase.listNumber+">listen</span></div>";
    
        $("#list").append(htm);
        //为新添加的input绑定事件
        DemoBase.bindEvt();
        DemoBase.listNumber++;

    });
    
});
</script>

</body>
</html>

 

posted @ 2014-03-31 00:43  方东信  阅读(373)  评论(0)    收藏  举报