Как применить фоновые цвета в значениях текстового поля AutoCompleteExtender в asp.net?

Question

Я связываю два табличных значения в AutoCompleteExtender, но мое требование состоит в том, чтобы дифференцировать две таблицы, применяют цвета, т. Е. Значения таблицы1 применяют красный цвет, а значения таблицы2 применяют зеленый цвет, как писать код.

 [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

. Пожалуйста, дайте мне какие-либо предложения ....

спасибо, Хемант

Answer 1

ответ - добавить функцию 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';
            }


        }

Answer 2

Чтобы выборочно применять цвета фона к элементам автозаполнения, вам, вероятно, придется использовать JavaScript.

Поскольку все элементы из одной таблицы содержат строку ',Employee', а элементы из другой таблицы содержат ',NonEmployee', эту информацию можно использовать для стилизации.

Установить свойства:

OnClientShown="autoCompleteShow"
CompletionListItemCssClass="AutoCompleteExtender_CompletionListItem"

на AutoCompleteExtender.

Внутри autoCompleteShow мы определяем цвет фона элементов <li> в соответствии с таблицей, из которой они получены:

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

Рабочий демонстрационный код:

[WebForm1.aspx]

<%@ 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>

* * 1 022 [AutoComplete.asmx (разметки)]

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

[~ / App_Code / AutoComplete.cs]

using System;
using System.Collections.Generic;
using System.Web.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class AutoComplete : WebService
{
    public AutoComplete()
    {
    }

    [WebMethod]
    public string[] GetCompletionList(string prefixText, int count)
    {
        if (count == 0)
        {
            count = 10;
        }

        List<string> items =
            new List<string>() { "test1 ,Employee Hgeurg Jfheuf",
                                 "test2 ,NonEmployee Uheure Iueir",
                                 "test3 ,Employee Jufhwiufhiwe Leroe",
                                 "test5 ,Employee Cgrejg Jehure Byer",
                                 "test7 ,NonEmployee Qewrerffx Yegr" };
        return items.ToArray();
    }
}