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

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Android重启应用程序代码

    Intent i = getBaseContext().getPackageManager() .getLaunchIntentForPackage(getBaseContext().getPacka ...

  3. HDU 4715 Difference Between Primes (打表)

    Difference Between Primes Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/O ...

  4. JS把字符串转换为数字的方法

     方法: (1)Number(),强制类型转换,接受一个参数. (2)parseInt(),把字符串转换为整形数字,可以接受一个或两个参数,其中第二个参数代表转换的基数,能够正确的将二进制.八进制.十 ...

  5. su Authentication failure解决

    su Authentication failure解决 关于Ubuntu桌面系统su root时认证失败的问题 1. Ubuntu 默认没有给root用户设置密码,当我们su root命令时, 提示认 ...

  6. [Puzzle] 蚂蚁路线碰撞问题

    有这么一道题目, 看下面的图, 假设有一条直线, 每个叉叉上有一只蚂蚁, 它们会随机选择一个方向, 向前或者向后移动, 每次走一格, 前进中当两只蚂蚁相遇, 它们会掉头, 问: 全部蚂蚁都走出去的最长 ...

  7. TCP/IP的网际层协议——ICMP

    ICMP经常被认为是IP层的一个组成部分.它携带于IP数据包中,ICMP封装在IP数据包内部: IP首部 ICMP数据包 下面是一份差错报文的例子: 最右边的+或者-代表该报文是查询报文还是错误报文. ...

  8. Hibernate知识总结（一）——Hibernate原理概述

    一.Hibernate是什么: 它是一个持久化框架,它对JDBC进行了轻量级的封装,简化对数据库的操作,提高开发效率.和另一个持久化框架MyBatis一样,他们操作数据库都是通过一个session对象 ...

  9. jquery.qrcode二维码插件生成彩色二维码

    jquery.qrcode.js 是居于jquery类库的绘制二维码的插件,用它来实现二维码图形渲染支持canvas和table两种绘图方式. (jquery.qrcode.js 设置显示方式为tab ...

  10. Unity3D Android手机开发环境配置

    Unity3D Android手机开发环境配置 Date:2014-01-01 07:09 1.配置eclipse环境:首先在官网下载安装包:http://developer.android.com/ ...