关于类似于自动填充搜索框的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 @   方东信  阅读(365)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
阅读排行:
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· .NET Core GC压缩(compact_phase)底层原理浅谈
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 语音处理 开源项目 EchoSharp
点击右上角即可分享
微信分享提示