方法一 ：【使用插件】

 //  联想功能 stat

        function cselstreet() {

            var name = "";

            //$("#txtname").keyup(function () {

            //    name = $("#txtname").val();

            //    alert(name);

            //});

            $("#txtaddre").flushCache();

            $("#txtaddre").autocomplete("getAutoCom.aspx?test=" + name + "", {

                minChars: 0,    //自动完成激活之前填入的最小字符

                width: 185,     //提示的宽度，溢出隐藏

                scrollHeight: 900,   //提示的高度，溢出显示滚动条

                matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示

                autoFill: false,    //自动填充

                dataType: 'json',

                mustMatch: false,    //如果设置为true,只会允许匹配的结果出现在输入框,当用户输入的是非法字符时,将被清除， Default: false

                extraParams: { Method: "SalePriceAutoComplate", username: function () { return $("#txtaddre").val() }, pid: function () { return $("#txtcounty").val() }, op: function () { return "3" }, userid: function () { return "123" } },    // 获取输入框里的值 并传到一般处理程序

                parse: function (data) {        //  将json 数据转换为 数组形式

                    var row = new Array();

                    for (var i = 0; i < data.length; i++) {

                        row[i] = {

                            data: data[i],

                            value: data[i].Cname,

                            result: data[i].Cid

                        };

                    }

                    return row;

                },

                formatItem: function (row, i, max) {

                    //显示的值

                    return row.Cname;

                },

                formatMatch: function (row, i, max) {

                    //查找匹配的值

                    return row.Cname;

                },

                formatResult: function (row) {

                    return row.Cname;

                }

            }).result(function (event, row, formatted) {

                //选中后的值

                //$("#spid").text(row.Cid);

                //$("#spname").text(row.Cname);

                $("#txtaddre").val(row.Cname);

                $("#autostreet").val(row.Cid);

            });

        }

https://files.cnblogs.com/files/hanxiaofei/autoJS.rar

方法二 ：【原生js代码】

<script>

function btna(id) {

$("#txt").val($("#" + id).text());

$("#div").hide();

}

function btnkeyup() {

$("#div").hide();

var param = {

username: $("#txt").val(),

op: 3,

pid: "310112000000"

}

$.getJSON("getAutoCom.aspx", param, function (data) {

var div = $("#div");

div.empty();

var str = "";

if (data.length > 0) {

$("#div").show();

$.each(data, function (i, item) {

str = str + "<a style='' class='mmp' onclick='btna(\"sp" + item.Cid + "\");'>";

str = str + " <div class='hehe' style='width:150px;background:#9a8181;color:white;'>";

str = str + "<span id='sp" + item.Cid + "'>" + item.Cname + item.Cid + "</span>";

str = str + " </div> <div style='height:2px;width:100px;'></div>";

});

// div.html(str);

document.getElementById("div").innerHTML = str;

// div.html(str);

// div.text(str);

$(".mmp").each(function (index) {

$(this).hover(function () {

$(".mmp .hehe").css({ "background": "#9a8181", "color": "white", });

$(".mmp .hehe").eq(index).css({ "background": "deepskyblue", "color": "white", });

});

});

}

// div.text(str);

});

}

</script>

</head>

<body>

<input type="text" onkeyup="btnkeyup()" id="txt" value="aa" />

<div style="width:170px;max-height:180px;overflow-y:scroll;display:none;border:1px solid deepskyblue;border-bottom-left-radius:10px;" id="div">

<!--<a style='background:#ddd;' class='mmp'>

<div class='hehe' style='width:100px;'>

<span>aaaaaa</span>

</div>

<div style='height:2px;width:100px;'></div>

</a>-->

</div>

</body>

autocomplate 学习的更多相关文章

  1. 从直播编程到直播教育：LiveEdu.tv开启多元化的在线学习直播时代

    2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...

  2. Angular2学习笔记（1）

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  3. ABP入门系列（1）——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  4. 消息队列——RabbitMQ学习笔记

    消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...

  5. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  6. Unity3d学习 制作地形

    这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...

  7. 《Django By Example》第四章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...

  8. 菜鸟Python学习笔记第一天：关于一些函数库的使用

    2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...

  9. 多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁，Atomic原子类)

    前言:刚学习了一段机器学习,最近需要重构一个java项目,又赶过来看java.大多是线程代码,没办法,那时候总觉得多线程是个很难的部分很少用到,所以一直没下决定去啃,那些年留下的坑,总是得自己跳进去填 ...

随机推荐

  1. HTML中的table导出为Excel文件

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

  2. python函数（一）

    python函数(一) 1.函数的定义: def test(): print('test is running...') return 定义一个函数,有3个部分需要注意: 函数名称.函数的命名规范与变 ...

  3. 让IE8支持html5中的video标签

    这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在<head>里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. <!-- ...

  4. Avoid Inputing Password While Pushing/Pulling Git Project

    If we add public key in our git account, we can pull/push project easily without password. However, ...

  5. PMP：1.引论

    全球项目管理业界定义的最重要的价值 观是责任.尊重.公正和诚实(成功准则).   项目是为创造独特的产品.服务或成果而进行的临时性工作:   开展项目是为了通过可交付成果达成目标.目标指的是工作所指向 ...

  6. 8.AOP全自动

    CGLIB字节码增强 l没有接口,只有实现类. 采用字节码增强框架 cglib,在运行时 创建目标类的子类,从而对目标类进行增强. 导入jar包: 自己导包(了解): 核心:hibernate-dis ...

  7. Service启动过程分析

    Service是一种计算型组件,用于在后台执行一系列的计算任务.由于工作在后台,因此用户是无法直接感知到它的存在.Service组件和Activity组件略有不同,Activity组件只有一种运行模式 ...

  8. Http Header 之 Requests Header 和 Responses Header

    在开发中,经常会遇到对网络请求添加相应的头信息,下面我们梳理一下Http Header相关的内容. 一.Requests Header Header 解释 示例 Accept 指定客户端能够接收的内容 ...

  9. ELK实战（Springboot日志输出查找）

    需求 把分布式系统,集群日志集中处理快速查询 搭建ELK并与springboot日志输出结合 搭建ELK 基于我前面的elasticsearch搭建博客文档docker-compose.yml基础上进 ...

  10. 故事描述SVM----支持向量机/support vector machine (SVM)

    作者:简之链接:https://www.zhihu.com/question/21094489/answer/86273196来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...