js_下拉菜单自动补全
方法1---------------------OK---------------------------------------------------
1.1写在<body>中--------
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">部品番号</label>
<div class="col-sm-10">
<input type="text" class="form-control" list="test2" id="bpfh" onfocus="this.value=''" />
<datalist id="test2">
</datalist>
</div>
</div>
1.2写在<script>中------------------
· <script type="text/javascript">
//需要添加的数据内容,可以通过ajax请求获取
//定义加载部品番号的函数
function loadcities() {
$.ajax({
async: false,
url: "/web_page/Handler1_ReadDb_新数据库2.ashx",
datatype: "json",
data: { "RequestType": "getMcode" },
success: function (data1) {
//返回结果
jieguo = data1;
var str0 = jieguo.split('#');
//alert(str0);
for (let i = 0; i < str0.length; i++) {
var obj = document.getElementById('test2'); //test2
var option = "<option value=" + str0[i].toString() + ">" + str0[i].toString() + "</option>"
$("#test2").append(option);
};
},
error: function (error) {
alert(error.responseText);
}
});//给下拉框赋值-结束
}
//页面加载完时加载此函数
window.onload = function () {
loadcities();
}
</script>
1.3写在<sHandler.ashx>中------------------
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <%@ WebHandler Language="C#" Class="Handler1_ReadDb" %>using System;using System.Web;using System.Data;using System.IO;using System.Data.SqlClient; //数据库using Newtonsoft.Json; //操作json库//一般处理程序public class Handler1_ReadDb : IHttpHandler //获取数据库数据,在网页上展示。OK{ //重写处理请求的方法 public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //context.Response.Write("Hello World"); //确认 ok （页面显示） if (context.Request["RequestType"] == "getMcode") { context.Response.Write(getMcode()); }; } //页面加载时，在下拉菜单中显示部品清单（来自另外一个数据库）OK private string getMcode() { //返回的样式例 string s0 = "select distinct MATNR from Exp_RawEdge"; SqlConnection conn = new SqlConnection("server=*.*.*.*;database=***;uid=***;pwd=****"); conn.Open(); SqlCommand cmd = new SqlCommand(s0, conn); //用来执行查询语句 SqlDataAdapter sda = new SqlDataAdapter(); //数据库适配器，用来充当数据库与数据集之间的桥梁 sda.SelectCommand = cmd; //选择命令向数据库发送（发送查询语句） DataSet ds = new DataSet(); //创建一个数据集对象,相当于小型数据库，它当中存放若干个数据块 sda.Fill(ds, "cs"); //Fill: 填充 把数据填充小型数据库的“CS”表中。 System.Data.DataTable table1 = ds.Tables[0]; //将数据表中第一列的数据取出，放在变量s0中 for (int i = 0; i < table1.Rows.Count; i++) { if (i == 0) { s0 = table1.Rows[i][0].ToString(); s0 = s0.Trim(); } else { s0 = s0 + "#" + table1.Rows[i][0].ToString(); s0 = s0.Trim(); } } return s0.Trim(); } //重写IsReusable属性 public bool IsReusable { get { return false; } }} |
方法2------------------------------------------------------------------------
<script type="text/javascript">
//需要添加的数据内容,可以通过ajax请求获取
//定义加载部品番号的函数
function loadcities() {
var url = "rawedge.aspx?action=get_matnrlist";
$.get(url, function (data) {
data = eval('(' + data + ')');//根据数据格式写
if (data && data.length > 0) {
//遍历数据
for (var i = 0; i < data.length; i++) {
//绑定数据
//jquery实现的方式
$("#matnr_list").append('<option label="' + data[i].MATNR + '" value="' + data[i].MATNR + '"></option>');
var option = "<option value=" + data[i].MATNR + ">" + data[i].MATNR + "</option>";
$("#matnr_list").append(option);
}
}
});
}
//页面加载完时加载此函数
window.onload = function () {
loadcities();
}
</script>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通