方法一 ：【使用插件】

 //  联想功能 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. 2019.02.11 bzoj4767: 两双手（组合数学+容斥dp）

    传送门 题意简述:你要从(0,0)(0,0)(0,0)走到(ex,ey)(ex,ey)(ex,ey),每次可以从(x,y)(x,y)(x,y)走到(x+ax,y+ay)(x+ax,y+ay)(x+ax ...

  2. Linux 第四天

    1.文件搜索命令 1)locate 在文件资料库中查找文件(需要文件资料库中有,新建的文件查不到,需要手动更新,updatedb.查不到/tmp目录下的文件) 语法:locate 文件名 常用选项: ...

  3. 使用itext生成pdf的，各种布局

    代码如下,jar包为itext.jar,itextAsia.jar,最好都是最新的 :2张图片也在最后贴出,把图片放到D盘可以直接生成制定格式的pdf. 最后生成的pdf如下: 代码如下: packa ...

  4. myeclipse 自动部署web项目（自动编译）

    打开自动编译:project->build automatically; 注:以下两种方法适用tomcat配置在myeclipse中的情况. 1.如果在myeclipse中tomcat是以deb ...

  5. Nginx unit 源码安装初体验

    Nginx unit 源码安装初体验 上次介绍了从yum的安装方法(https://www.cnblogs.com/wang-li/p/9684040.html),这次将介绍源码安装,目前最新版为1. ...

  6. js生成随机固定长度字符串的简便方法

    概述 碰到一个需求:用js生成固定长度的字符串.在网上查了很多资料,网上的方法都比较麻烦.我自己灵光一现,实现了一个比较简单的方法.记录下来,供以后开发时参考,相信对其他人也有用. js生成随机字符串 ...

  7. nginx访问问题

    root响应的路径:配置的路径(root指向的路径)+完整访问路径(location的路径)+静态文件alias响应的路径:配置路径+静态文件(去除location中配置的路径)

  8. linux下把动态链接库加入环境变量的几种方式

    一. 将网络SDK各动态库路径加入到LD_LIBRARY_PATH环境变量 1.在终端输入:export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/XXX 只在当前终端起作用 ...

  9. Caffe 使用记录（五）：math_functions 分析

    本文转载自 Caffe源码(一):math_functions 分析 math_function 定义了caffe 中用到的一些矩阵操作和数值计算的一些函数,这里以float类型为例做简单的分析 1. ...

  10. 纯JavaScript实现俄罗斯方块（详细注释，ES6）

    借鉴了慕课网的课程<基于websocket的火拼俄罗斯(单机版)>虽然改动比较多,但是还是核心部分没有改,加了一些不怎么好听的声音,和看起来并不好看的界面. CSS部分基本是瞎写的,因为对 ...