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

    redis存储session配制方法需要三个模块: 1.redis 2.express-session 3.connect-redis 项目中的配置方法代码片段如下: 首先连接redis,连接redi ...

  2. Android 4.2启动代码分析(一)

    Android系统启动过程分析 Android系统的框架架构图如下(来自网上):   Linux内核启动之后----->就到Android的Init进程 ----->进而启动Android ...

  3. 使用CSS3伸缩盒实现图片垂直居中

    用CSS实现图片垂直居中的方法有很多,针对移动端设备可以用CSS3伸缩盒来实现图片垂直居中. 代码如下: <div class="box"> <img src=& ...

  4. java中关于线程间协作所用关键字synchronized，wait,notify的用法

    wait/notify()关键字适用于一个线程通知另一个线程所需的条件状态已就绪,最常用于线程在循环中休眠直到获取特定条件的场景. 例如,一个线程一直等待直到队列中有一个组件能够处理:当组件添加到队列 ...

  5. iOS 16进制颜色转换10进制颜色

    +(UIColor *)colorWithHexString:(NSString *)coloStr{ //    检索  去下空格和换行 转成大写 NSString *cString = [[col ...

  6. JavaScript中的构造函数

    目录: constructor & prototype 为构造函数添加属性和方法的多种不同方法 组合使用this和prototype关键字创建构造函数(常用方法) 用对象直接量作为构造函数的参 ...

  7. python 实现单链表

    #! /usr/bin/env python ### ### Linked List python implementation ### ### @reference Data Structures ...

  8. Java 注解机制

    一.注解中的信息已经在Class中了,我们应该如何读取出来 java.lang.reflect.AnnotatedElement接口: public Annotation[] getAnnotatio ...

  9. Eclipse+EGit的配置注意点, 以及解决Github多个本地仓库之间的冲突

    问题描述 不同本地仓库(e.g. Repo1, Repo2)之间同时修改一个文件时, 出现文件无法merge的情况. 具体表现为, 冲突(红色双向实心箭头)一直存在, 点pull没反应, 点push报 ...

  10. 虚拟机NAT模式主机ping不通虚拟机解决方案

    本篇没有抓包,只是简单一个实施.需要的童鞋可以拿走这个方法. 虚拟机与真机通信三种模式, 桥接模式,NAT 模式 ,HOST 模式. 桥接就是在真机的网络上模拟一个网卡,给虚拟机申请一个和真机在同一个 ...