您的位置：首页 > 运维架构

可输入的 Combox(DropDownList)

2016-07-22 10:57 423 查看

aspx页面中需要可以输入的combox，在网上找了一个js的插件，效果图如下：

前台代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InputComBox.aspx.cs" Inherits="School.Web.TestDemo.InputComBox" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可输入的combox</title>
<link type="text/css" href="/Scripts/jquery-1.10.4/jquery-ui.min.css" rel="stylesheet" />
<script type="text/javascript" src="/Scripts/jquery-1.10.4/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-1.10.4/jquery-ui.min.js"></script>
<style type="text/css">
.appcusser li a {
width: 32px;
background: url(/Images/pro_down.gif);
float: left;
display: block;
height: 33px;
line-height: 30px;
text-align: center;
color: #2b7fbf;
font-weight: bold;
margin-right: 5px;
}

.appcusser li span {
display: block;
float: left;
width: 100px;
text-align: right;
padding-right: 5px;
color: #666;
}
.appcusser li label {
display: block;
float: left;
line-height: 28px;
margin-right: 5px;
}

ul, li {
list-style: none;
}

.custom-combobox {
position: relative;
display: inline-block;
}

.custom-combobox-toggle {
position: absolute;
top: 5px;
bottom: 0;
left: 160px;
top: 0;
padding: 0;
height: 32px;
/* 支持： IE7 */
*height: 1.7em;
*top: 0.1em;
}

.custom-combobox-input {
margin: 0;
padding: 0.3em;
background-color: #fff;
background-image: none;
color: #333;
height: 22px;
width: 150px;
}

.hideA {
background: #f3f3f3;
}

.clear {
clear: both;
height: 0;
overflow: hidden;
}
</style>
<script type="text/javascript">
(function ($) {
$.widget("custom.combobox", {
_create: function () {
this.wrapper = $("<span>")
.addClass("custom-combobox")
.insertAfter(this.element);

this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},

_createAutocomplete: function () {
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";

this.input = $("<input>")
.appendTo(this.wrapper)
.val(value)
.attr("id", "btnShowPro")
.addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
.addClass(" validate[required,maxSize[200]]")
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy(this, "_source")
})
.tooltip({
tooltipClass: "ui-state-highlight"
});

this._on(this.input, {
autocompleteselect: function (event, ui) {
ui.item.option.selected = true;
this._trigger("select", event, {
item: ui.item.option
});
},

autocompletechange: "_removeIfInvalid"
});
},

_createShowAllButton: function () {
var input = this.input,
wasOpen = false;

$("<a>")
.attr("tabIndex", -1)
//.attr("title", "aShow")
.attr("id", "aShow")
//.tooltip()
.appendTo(this.wrapper)
.button({
//icons: {
//    primary: "ui-icon-triangle-1-s"
//},
text: false
})
.removeClass("ui-corner-all")
.addClass("custom-combobox-toggle ui-corner-right")
.mousedown(function () {
wasOpen = input.autocomplete("widget").is(":visible");
})
.click(function () {
input.focus();

// 如果已经可见则关闭
if (wasOpen) {
return;
}

// 传递空字符串作为搜索的值，显示所有的结果
input.autocomplete("search", "");
});
},

_source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response(this.element.children("option").map(function () {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text)))
return {
label: text,
value: text,
option: this
};
}));
},

_removeIfInvalid: function (event, ui) {

// 选择一项，不执行其他动作
if (ui.item) {
return;
}

// 搜索一个匹配（不区分大小写）
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children("option").each(function () {
if ($(this).text().toLowerCase() === valueLowerCase) {
this.selected = valid = true;
return false;
}
});

// 找到一个匹配，不执行其他动作
if (valid) {
return;
}

// 移除无效的值
//this.input
//  .val("")
//  .attr("title", value + " didn't match any item")
//  .tooltip("open");
this.element.val("");
this._delay(function () {
this.input.tooltip("close").attr("title", "");
}, 2500);
//this.input.data("ui-autocomplete").term = "";
},

_destroy: function () {
this.wrapper.remove();
this.element.show();
}
});
})(jQuery);

$(function () {
$("#<%=ddlName.ClientID%>").combobox();
$("#toggle").click(function () {
$("#<%=ddlName.ClientID%>").toggle();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul class="appcusser">
<li>
<span><asp:TextBox ID="txtID" runat="server" Width="80"></asp:TextBox></span>
<label><asp:DropDownList ID="ddlName" runat="server" CssClass="app_txt2 fl"></asp:DropDownList></label>
<div class="clear"></div>
</li>
<li>
<asp:Button ID="btnSeach" Text="查询" runat="server" />
</li>
</ul>
</div>
</form>
</body>
</html>

后台代码

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

namespace School.Web.TestDemo
{
public partial class InputComBox : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string tID = txtID.Text.Trim();
//if (!IsPostBack)
//{
if (string.IsNullOrEmpty(tID))
{
BindDrop();
ddlName.Items.Insert(0, new ListItem(" ", ""));
}
else
{
BindDrop();
int id = 0;
int.TryParse(tID, out id);
Bind(id);
}
//}
}

public void Bind(int id)
{
Student student = InitData().SingleOrDefault(s => s.ID == id);
if (student != null)
{
if (ddlName.Items.Contains(new ListItem(student.userName))) //判断ddlName下拉列表中是否存在该值，存在则赋值，不存在则插入ddlName下拉列表中
{
ddlName.SelectedValue = student.userName;
}
else
{
ddlName.Items.Insert(0, new ListItem(txtID.Text.Trim()));
}
}
else
{
ddlName.Items.Insert(0, new ListItem(txtID.Text.Trim()));
}
}

public void BindDrop()
{
ddlName.DataSource = InitData();
ddlName.DataTextField = "userName"; //ddlName中DataTextField和DataValueField设置为同一个值，在查询是否存在该值是才可以；或者new ListItem("text", "value")设置text、value值不一样
ddlName.DataValueField = "userName";
ddlName.DataBind();
}

public List<Student> InitData()
{
List<Student> listStudent = new List<Student>();
for (int i = 1; i < 11; i++)
{
Student student = new Student();

student.ID = i;
student.userName = "学生" + i;
student.passWord = "123456";
student.Age = i + 20;
student.Address = "北京市顺义区天竺镇" + i + "区";
listStudent.Add(student);
}
return listStudent;
}
}

public class Student
{
public int ID { get; set; }
public string userName { get; set; }

public string passWord { get; set; }

public int Age { get; set; }

public string Address { get; set; }
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航