autocomplate 学习
方法一 ：【使用插件】
// 联想功能 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); }); }
方法二 ：【原生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 学习的更多相关文章
- 从直播编程到直播教育：LiveEdu.tv开启多元化的在线学习直播时代
2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...
- Angular2学习笔记（1）
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
- ABP入门系列（1）——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- 消息队列——RabbitMQ学习笔记
消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Unity3d学习 制作地形
这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...
- 《Django By Example》第四章 中文 翻译 （个人学习，渣翻）
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...
- 菜鸟Python学习笔记第一天：关于一些函数库的使用
2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...
- 多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁，Atomic原子类)
前言:刚学习了一段机器学习,最近需要重构一个java项目,又赶过来看java.大多是线程代码,没办法,那时候总觉得多线程是个很难的部分很少用到,所以一直没下决定去啃,那些年留下的坑,总是得自己跳进去填 ...
随机推荐
- ABP框架系列之二十九：(Hangfire-Integration-延迟集成)
Introduction Hangfire is a compherensive background job manager. You can integrate ASP.NET Boilerpla ...
- MySQL之二 yum安装及初识
安装 yum install mysql-server chkconfig -list mysqld 查看mysqld服务是否为开机启动 chkconfig mysqld on 设为开机启动 ...
- ScriptOJ-safeGet#99
const safeGet = (data, path) => { if(!path) return undefined; const pathArr = path.split('.'); le ...
- hdu 4027 Can you answer these queries？[线段树]
题目 题意: 输入一个 :n .(1<=n<<100000) 输入n个数 (num<2^63) 输入一个m :代表m个操作 (1<=m<<100 ...
- 《mysql必知必会》学习_第22章_20180809_欢
第22章:使用视图,视图是虚拟的表,以表形式呈现的是你查询的结果.并不是说在数据库里面真的存在这个表,但是是真的存在这些数据. select cust_name,cust_contact from c ...
- shell 命令 if elif else fi 用法
#! /bin/bash if Iam; then echo "it worked two" else ls echo "I am in the else" f ...
- Delphi Excel导入 的通用程序转载
Delphi Excel导入 的通用程序 (-- ::)转载▼ 标签: it 分类: Delphi相关 步骤: 连excel(自己知道其格式,最好是没个字段在数据一一对应) 读excel数据,填入到数 ...
- SDWebImage之SDImageCache
SDImageCache和SDWebImageDownloader是SDWebImage库的最重要的两个部件,它们一起为SDWebImageManager提供服务,来完成图片的加载.SDImageCa ...
- Android开发 - 掌握ConstraintLayout（四）创建基本约束
上一篇我们介绍了编辑器的基本使用,本文我们介绍创建基本的约束. "约束"表示View之间的位置关系.当我们在ConstraintLayout布局中创建View时,如果我们没有添加任 ...
- can only concatenate tuple (not "int") to tuple问题原因
#测试程序 import os from pydub import AudioSegment #已经确定, # enPath = "%s%s/%s"%(enDir,file,enf ...