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>中------------------
<%@ 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>
浙公网安备 33010602011771号