接了个单子，客户要求左边输入时，右边自动到数据库查出对应内容，如果是单个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>

关于类似于自动填充搜索框的DEMO的更多相关文章

  1. 使用jQuery-UI来实现一个Ajax的自动完成功能（自动填充搜索框的下拉值）

    首先你要在.net拓展包中去搜索  jquery ui (Combined Libray)安装这么个文件 第二部   在控制器中添加我们根据输入搜索框的值获取符合的记录集的action 第三步  有了 ...

  2. 分享一个jquery写的类似于百度的搜索框,(可动态配置,可单列或者table格式,可填充数据)

    需求:类似于百度的搜索框,可配置,可单列可table格式,可填充数据.页面可多次使用,简单,易用. 想法:使用jquery,css,ajax,前台调用,后台返回json数据. jquery代码: va ...

  3. Ajax以及类似百度搜索框的demo

    public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...

  4. JS实现日历控件选择后自动填充

    最近在做人事档案的项目,在做项目的初期对B/S这块不是很熟悉,感觉信心不是很强,随着和师哥同组人员的交流后发现,调试程序越来越好了,现在信心是倍增,只要自己自己踏实的去研究.理解代码慢慢的效果就出来了 ...

  5. 使用 jquery-autocomplete插件 完成文本框输入自动填充联想效果 解决兼容IE输入中文问题

    项目中有时会用到ajax自动补全查询,就像Google的搜索框中那样,输入汉字或者字母的首个字母,则包含这个汉字或者字母的相关条目会显示出来供用户选择,该插件就是实现这样的功能的.autocomple ...

  6. （八）solr7实现搜索框的自动提示并统计词频

     solr7实现搜索框的自动提示并统计词频 1:用solr 的suggest组件,统计词频相对麻烦. 2:用TermsComponent,自带词频统计功能. Terms组件提供访问索引项的字段和每个词 ...

  7. input框自动填充内容背景颜色为黄色解决方法

    谷歌浏览器input自动填充内容,背景色会是黄色,想改的话: input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset;} 这种方 ...

  8. chrome下input文本框自动填充背景问题解决

    chrome下input文本框会自动填充背景,只需要给文本框加一个样式即可解决问题 input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px ...

  9. 解决input框自动填充为黄色的问题

    题原因:input 框会自动填充一个颜色  如图所示  解决方法 :通过动画去延迟背景颜色的显示  代码如下 input:-webkit-autofill, textarea:-webkit-auto ...

随机推荐

  1. Java面试题之五

    二十一.super()与this()的区别? (1)用this的情况: 1.在构造方法中,通过this调用另一个构造方法,用法:this(参数列表). 2.在函数参数或函数的局部变量与成员变量同名,即 ...

  2. org.xml.sax.SAXParseException: An invalid XML character (Unicode: 0x0) was found in the CDATA sectio

    偶尔有一次beyond compare比较部署文件时,发现有一个JSP文件结尾的地方有一大堆空白的二进制符号,当时没有管,就覆盖上去了. =================背景分割线========= ...

  3. OpenGL绘制简单场景,实现旋转缩放平移和灯光效果

    本项目实现了用OpenGL绘制一个简单场景,包括正方体.球体和网格,实现了物体的旋转.缩放.平移和灯光效果.附有项目完整代码.有具体凝视.适合刚開始学习的人熟悉opengl使用. 开发情况 开发环境V ...

  4. SQL语句一些特殊的用法

    SQL语句一些特殊的用法 一.基础 1.说明:创建数据库 CREATE DATABASE database-name  2.说明:删除数据库 drop database dbname 3.说明:备份s ...

  5. Date Time Picker控件

    Step1 在界面中添加一个Date Time Picker控件,ID为:IDC_DATETIMEPICKER1 Step2 该控件关联变量 CDateTimeCtrl m_dateCtrl; Ste ...

  6. IIS7.0/7.5 MVC3 实现伪静态

    routes.MapRoute(            "Default",            "{controller}/{action}.html/{id}&qu ...

  7. CentOS修改系统默认语言与编码

    有时候在安装CentOS无意中把默认语言设置为中文,而部分SSH软件不支持中文编码,所以在远程管理的时候会出现些乱码的现象.   如何修改CentOS的默认语言呢? 请先使用root权限帐户登陆 一. ...

  8. 使用jsp标签和java资源管理实现jsp支持多语言

    1.编写一个Serverlet并设置服务器启动是初始化该Servlet,并在初始化方法中实现对java的资源加载: DispatcherServlet.java package mypack; imp ...

  9. BZOJ 3170: [Tjoi 2013]松鼠聚会( sort )

    题目的距离为max(|x1-x2|, |y1-y2|) (切比雪夫距离). 切比雪夫距离(x, y)->曼哈顿距离((x+y)/2, (x-y)/2) (曼哈顿(x, y)->切比雪夫(x ...

  10. C# 后台调用前台JS

    1.需要添加微软的类库  Interop.MSScriptControl.dll 2. var path = Path.GetFullPath("../../javascript/youzi ...