方法一 ：【使用插件】

 //  联想功能 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下强制杀死进程的方法

    常规篇: 首先,用ps查看进程,方法如下: $ ps -ef …… smx 1822 1 0 11:38 ? 00:00:49 gnome-terminal smx 1823 1822 0 11:38 ...

  2. cropper，图片剪辑上传工具的使用

    cropper工具是一个功能强,兼容性好的一个图片裁剪和上传工具 GitHub地址:https://github.com/kesixin/Head_Cut_PC <div class=" ...

  3. Mysql中比较常用的两种存储引擎和事务

    存储引擎:引擎(类似汽车上的发动机)决定了数据库的快慢,MySql中有20多个引擎,不同的存储引擎提供不同的存储机制.索引技巧.锁定水平.MYISAM存储引擎,INNODB存储引擎最出名.数据库的核心 ...

  4. 深度搜索优先（全排列）//本内容来自《啊哈！算法》或者英文名《Aha!Algorithms》）

      package Mypackage; import java.util.Scanner; public class 全排列{ static int a[]=new int[10]; static ...

  5. Delphi控件cxGrid 如何动态创建列?

    方法一: var i: Integer; Column: TcxGridDBColumn; cxView: TcxGridDBTableView; begin cxView := Self.Level ...

  6. iostat 命令详解

    前言 话说搞运维的人没有两把"刷子",都不好意思上服务器操作.还好,我还不是搞运维的,我一直都自诩是开发人员,奈何现在的东家运维人员"水"的一比,还要我这个自诩 ...

  7. MyBatis 源码分析系列文章导读

    1.本文速览 本篇文章是我为接下来的 MyBatis 源码分析系列文章写的一个导读文章.本篇文章从 MyBatis 是什么(what),为什么要使用(why),以及如何使用(how)等三个角度进行了说 ...

  8. location-alias

    location /images/ { alias /project/pic/; } 给定的路径对应于location的"/url" 这个URL; /images/f.jpg -- ...

  9. Error: [ng:areq] Argument ‘AppCtrl’ is not a function, got undefined

    今天把用ionic做一个案例,和ionic示例项目差不多,只是用requirejs分离了controller,但是一直报错 Error: [ng:areq] Argument ‘AppCtrl’ is ...

  10. LeetCode--No.001 Two Sum

    Two Sum Total Accepted: 262258 Total Submissions: 1048169 Difficulty: Easy Given an array of integer ...