关于类似于自动填充搜索框的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="900px;background: brown;">
</div>
<br>
<div id="btn_domain" style="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; 50%;height: 40px;'>cate:<input id=s"+DemoBase.listNumber+"></div>";
        htm+="<div id='right' style='float: left; 50%;height: 40px;'><span id=t"+DemoBase.listNumber+">listen</span></div>";
    
        $("#list").append(htm);
        //为新添加的input绑定事件
        DemoBase.bindEvt();
        DemoBase.listNumber++;

    });
    
});
</script>

</body>
</html>
原文地址:https://www.cnblogs.com/cfas/p/3634941.html