如何在asp.net中的AutoCompleteExtender文本框值中应用背景颜色?

时间:2011-11-04 05:01:42

标签: asp.net web-services sql-server-2008

我在AutoCompleteExtender中绑定两个表值,但我的要求是区分两个表应用颜色,即table1值应用红色和table2值应用绿色如何编写代码请给我任何建议 我的代码是

 [WebMethod]
    public string[] GetCompletionList(string prefixText, int count)
        {
        if (count == 0)
        {
            count = 10;
        }
        DataTable dt = GetRecords(prefixText);
        List<string> items = new List<string>(count);

        for (int i = 0; i < dt.Rows.Count; i++)
        {          
            string strName = dt.Rows[i][1].ToString() + ',' + dt.Rows[i][0].ToString();             
            items.Add(strName);
            //items.Add(System.Drawing.Color.Red);

        }
        return items.ToArray();

    }

Getrecords代码

public DataTable GetRecords(string strName)
    {
        SqlCommand cmd = new SqlCommand("Usp_Consultant1", LITRMSConnection);

        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@consultantname", strName);
                DataSet objDs = new DataSet();
        SqlDataAdapter dAdapter = new SqlDataAdapter();
        dAdapter.SelectCommand = cmd;
        LITRMSConnection.Open();
        dAdapter.Fill(objDs);
        LITRMSConnection.Close();
        return objDs.Tables[0];
    }

和存储过程是

CREATE Procedure Usp_Consultant1
    (@consultantname varchar(100))
As
        Begin
            select  (cast(ConsultantID as varchar)+',Employee')as ConsultantID,(FirstName+LastName)as ConsultantName from Consultant  where FirstName+LastName like +@consultantname+'%'                
            union all           
            select  (cast(ConsID as varchar)+',NonEmployee')as ConsultantID,(Firstname+LastName)as consultantName from InDirectConsultant  where FirstName+LastName like +@consultantname+'%'   
            ORDER BY 1;
        End

请给我任何建议......

谢谢你 hemanth

2 个答案:

答案 0 :(得分:2)

回答是添加javascript函数

 function getCustomers_Populated(sender, e) {

        var customers = sender.get_completionList().childNodes;
        var searchText = sender.get_element().value;

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

            var customer = customers[i];
            var customerValueArray = (customer._value).split(",");
            var customerId = customerValueArray[0];
            var type = customerValueArray[2];
             customers[i].innerHTML = customerId;
            if (type == 'Employee') {
                customers[i].style.backgroundColor = 'red';
            }
            else {
                customers[i].style.backgroundColor = 'blue';
            }


        }

答案 1 :(得分:0)

要有选择地将背景颜色应用于autocompleteextender项目,您可能需要使用JavaScript。

由于一个表中的所有项都包含字符串',Employee',而另一个表中的项包含',NonEmployee',因此您可以使用该信息进行样式设置。

设置属性:

OnClientShown="autoCompleteShow"
CompletionListItemCssClass="AutoCompleteExtender_CompletionListItem"
<{1>}上的

AutoCompleteExtender内,我们根据它们来自的表格设置autoCompleteShow项背景颜色:

<li>

工作演示代码:

[WebForm1.aspx的]

<script type="text/javascript">
  function autoCompleteShow() {
    var elements = document.getElementsByClassName('AutoCompleteExtender_CompletionListItem');
    for (var i = 0; i < elements.length; i++)
      if (elements[i].innerHTML.search(",Employee") != -1)
        elements[i].style.setProperty("background-color", "#4CC417", "!important");
      else
        elements[i].style.setProperty("background-color", "Red", "!important");
  }
</script>

[AutoComplete.asmx(标记)]

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AutoCompleteExtenderContextualItemBgColor.WebForm1" %>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>

<!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>

    <style type="text/css">
    .AutoCompleteExtender_CompletionListItem 
    {
        color : White;
    }
    .AutoCompleteExtender_HighlightedItem
    {
        color : Black;
    }
    </style>

    <script type="text/javascript">
      function autoCompleteShow() {
        var elements = document.getElementsByClassName('AutoCompleteExtender_CompletionListItem');
        for (var i = 0; i < elements.length; i++)
          if (elements[i].innerHTML.search(",Employee") != -1)
            elements[i].style.setProperty("background-color", "#4CC417", "!important");
          else
            elements[i].style.setProperty("background-color", "Red", "!important");
      }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="Server" />
      <asp:TextBox runat="server" ID="myTextBox" Width="250" />
      <asp:AutoCompleteExtender runat="server"
        ID="myAutoCompleteExtender"
        TargetControlID="myTextBox"
        ServicePath="AutoComplete.asmx" 
        ServiceMethod="GetCompletionList"
        CompletionListItemCssClass="AutoCompleteExtender_CompletionListItem"
        CompletionListHighlightedItemCssClass="AutoCompleteExtender_HighlightedItem"
        OnClientShown="autoCompleteShow">
      </asp:AutoCompleteExtender>
    </div>
    </form>
</body>
</html>

[〜/ App_Code文件/ AutoComplete.cs]

<%@ WebService
    Language="C#"
    CodeBehind="~/App_Code/AutoComplete.cs"
    Class="AutoComplete" %>