接了个单子，客户要求左边输入时，右边自动到数据库查出对应内容，如果是单个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. UNIX文化与历史--初学者必看

    UNIX文化与历史 UNIX这个名字早已被众多用户所熟知.作为一个操作系统,它以其独特的魅力----即开放性.可移植性.和多用户多任务等特点,不仅赢得了广大用户的喜爱,同时也受到许多计算机厂商的青睐. ...

  2. select option 下拉多选单选bootstrap插件使用总结2

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

  3. 使用AFNetworking请求新浪微博数据接口出错解决办法

    在使用AFNetworking请求新浪微博数据接口时会出这样的错误,如 这样的错误说明,AFNetworking无法处理这样的数据格式.所以,我们需要修改AFNetworking中的一些接收数据格式. ...

  4. md笔记——微信JS接口

    微信js接口 隐藏微信中网页右上角按钮 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { Weix ...

  5. 利用CSS3特性巧妙实现漂亮的DIV箭头

    DIV箭头用于表现DIV内容的指向,是使用非常普遍的一种表现形式,例如新浪微博的消息转发: 还有傲游网站的导航条: 像傲游账户上方这种箭头更需要多幅图片以表现箭头和hover的效果. 传统的实现方式都 ...

  6. Python 读写文件操作

    python进行文件读写的函数是open或file file_handler = open(filename,,mode) Table mode 模式 描述 r 以读方式打开文件,可读取文件信息. w ...

  7. 大数据之scala基本语法学习

    package edu.snnu.test object list2 { //把字符串转化成一个char类型的list "99 Red Balloons".toList //> ...

  8. codeforces 632E. Thief in a Shop fft

    题目链接 E. Thief in a Shop time limit per test 5 seconds memory limit per test 512 megabytes input stan ...

  9. page cache和buffer cache

    因为要优化I/O性能,所以要理解一下这两个概念,这两个cache着实让我迷糊了好久,通过查资料大概明白了两者的区别,试着说下. page cache:文件系统层级的缓存,从磁盘里读取的内容是存储到这里 ...

  10. java中的四则运算

    代码的思路是通过正则判断计算每个最小的计算单元.以下是代码: package cn.com.lawchat.forpublicmvc.util; import java.math.BigDecimal ...