.net 通过输入文本框进行下拉式菜单的联想搜索(资料1)

最新推荐文章于 2023-04-25 16:40:38 发布

IT技术与企业应用结合的爱好者

最新推荐文章于 2023-04-25 16:40:38 发布

阅读量2.1k

点赞数

分类专栏： ADO.NET

ADO.NET 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

把数据库数据放入数组请参考：http://bbs.csdn.net/topics/370030717

打开一个空网页Default.

前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtFilterCity" runat="server" οnkeyup="filterCity(this);"></asp:TextBox><br />
<asp:DropDownList ID="ddlCityList" runat="server">
</asp:DropDownList>
</div>

<script type="text/javascript">
var store = [];
window.onload = function () {
var citys = document.getElementById('ddlCityList');
for (var i = 0; i < citys.options.length; i++) {
var city = {
id: citys.options[i].value,
name: citys.options[i].text
};
store.push(city);
}
}
function filterCity(o) {
var citys = document.getElementById('ddlCityList');
citys.options.length = 0;
if (o.value != '') {
for (var j = 0; j < store.length; j++) {
if (store[j].name.indexOf(o.value) >= 0) {
var option = new Option();
option.value = store[j].id;
option.text = store[j].name;
citys.options.add(option);
}
}
} else {
for (var j = 0; j < store.length; j++) {
var option = new Option();
option.value = store[j].id;
option.text = store[j].name;
citys.options.add(option);
}
}
}
</script>

</form>
</body>
</html>

后台代码;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
var list = new[] {
new{Id="1",Name="长沙"},
new{Id="2",Name="上海"},
new{Id="3",Name="北京"},
new{Id="4",Name="湘潭"}
}.ToList();
ddlCityList.DataSource = list;
ddlCityList.DataTextField = "Name";
ddlCityList.DataValueField = "Id";
ddlCityList.DataBind();
}
}
}

注意的地方解释代码：

indexOf(o.value)

报告指定字符在此实例中的第一个匹配项的索引。搜索从指定字符位置开始，并检查指定数量的字符位置。

if(store[j].name.indexOf(o.value) >= 0)

如果j行的数据那么字段的内容是否有o.value中的内容。o.value中的内容就是文本框中即时输入的内容。

window.οnlοad= function () {

var citys =document.getElementById('ddlCityList');

for (var i = 0; i <citys.options.length; i++) {

var city = {

id: citys.options[i].value,

name: citys.options[i].text

};

store.push(city);

}

把

varlist = new[] {

new{Id="1",Name="asd"},

new{Id="2",Name="wer"},

new{Id="3",Name="rer"},

new{Id="4",Name="hgf"},

new{Id="5",Name="ghj"}

}.ToList();

的内容放入city，放入store

Push()

push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。push()方法和pop() 方法使用数组提供的先进后出栈的功能。

在本例中，我们将创建一个数组，并通过添加一个元素来改变其长度：

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr + "<br />")

document.write(arr.push("James") + "<br />")

document.write(arr)

</script>

输出：

George,John,Thomas

George,John,Thomas,James

varcitys = document.getElementById('ddlCityList');

获取ddlCityList的内容

是控件的ID 属性值
比如<input type="hidden" value="1" id='aa'>
document.getElementById('aa') 这样就获取到了控件接下来就是操作
document.getElementById('aa').value  输出是1  也就是控件的VALUE值