方法一 ：【使用插件】

 //  联想功能 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. 《Linux就该这么学》第三天课程

    秦时明月经典语录: 王道: 千里挥戈,万众俯首.四海江湖,百世王道.——项羽 今天主要介绍了常用系统工作的命令 如需进一步了解,请前往https://www.linuxcool.com(附带配音) r ...

  2. modal 移除遮盖层

    弹框关闭时 移除遮盖层 $("#modal").bind('hide.bs.modal',function(){ $(".modal-backdrop").re ...

  3. C++ MFC棋牌类小游戏day3

    今天开始设计小人棋子. 画法跟画虎一样,唯一不一样的是小人在刚开始会有重叠的情况,所以画起来可能比虎的棋子能够难一点. 我打算用Location结构体中的num来标记每个棋盘坐标存在棋子的个数,isH ...

  4. s4 Docker 网络1

    网络基础 Docker Network 单机网络 Bridge Network Host Network None Network 多机网络:overlay Network 网络的分层 公有IP和私有 ...

  5. [solution] JZOJ-5795 词典

    [solution]JZOJ-5795 词典 题面 Description 小C有$n$个字符串$T_1 T_n$,给出$m$个询问 第$i$个询问给出一个字符串$S_i$,对于每个询问,我们可以得到 ...

  6. ReactNative学习笔记（二）基础进阶

    一个最简单的HelloWorld页面 先不多解释,直接上代码: import React, { Component } from 'react'; import {AppRegistry, Style ...

  7. 理解Docker

    Docker Image OS分为 内核(kernel) 和 用户 空间,kernel 启动后,会挂载root文件系统提供用户空间. Docker Image 就相当于一个 root文件系统.是一个特 ...

  8. Testing - 软件测试知识梳理 - 测试阶段

    估算 测试对软件工作量的估算的准确性 测试评估软件系统的状况的准确性 关注点: 不准确的估算 不适当的开发过程 不真实的状态报告 如何知道对工作量的估算是正确的 估算工作量的工具很容易出错 对软件工作 ...

  9. 彻底理解Java中的基本数据类型转换（自动、强制、提升）

    说基本数据类型转换之前,先了解下 Java 中的 8 种基本数据类型,以及它们的占内存的容量大小和表示的范围,如下图所示. 重新温故了下原始数据类型,现在来解释下它们之间的转换关系. 自动类型转换 自 ...

  10. redis pipeline 独占链接

    pipeline期间将“独占”链接,此期间将不能进行非“管道”类型的其他操作,直到pipeline关闭:如果你的pipeline的指令集很庞大,为了不干扰链接中的其他操作,你可以为pipeline操作 ...