如何在ajax自动完成上创建多列？答案

【问题标题】：How to create multipe column on ajax auto complete?如何在ajax自动完成上创建多列？
【发布时间】：2015-06-17 20:28:47
【问题描述】：

我创建了一个用于在 ajax 自动完成上搜索项目的表，我想这样设计（表 1）：

这是我的网络服务代码：

[WebMethod]
    public object[] GetResult(string prefixText, int count)
    {
        List<object> result;

        result = new List<object>();
        try
        {

            Some Database query...


            while (rd.Read())
            {

                result.Add(new
                {
                    ProductName = rd[0],
                    Pic= rd[1],
                    RecID = rd[2],
                    Properties= rd[3]
                });
            }
            rd.Close();
            con.Close();


        }
        catch (Exception ex)
        {


        }
        return result.ToArray();
    }

我为所有数据及其 java 脚本端添加了一个 List 对象：

<script type="text/javascript">
      function onPopulated() {

          var list = $find("ace").get_completionList();
          var count = list.childNodes.length;
          for (i = 0; i < count; i++) {

              var item = list.childNodes[i]._value;
              var name = item.ProductName ;
              var kategory = item.Properties;
              var RecID = item.RecID;
              var Pic= item.Pic;
              var url = "http://abc.com.tr/img/p_" + RecID + "_" + Pic+ "_01.jpg"
              list.childNodes[i].innerHTML = '<span id="name"><table><tr style="width:260px;height:55px;" ><td><img width="50" height="50" style="position:relative;" src="' + url + '"/></td><td style="font-size:11px;font-weight:bold;min-height:20px;">'+ name + '</td></tr></table></span>';
              //'<span id="name"><table  style="width:260px;"><tr><td><img width="50" height="50" src="' + url + '"/></td><td><b style="font-size:12px;">' + name + '</b><br>' + kategory + '</td></tr></table></span>'
          }

      }


      function onSelected() {

          var i = $find("ace")._selectIndex;

          var item = list.get_completionList().childNodes[i]._value;

          $get("txtSearch").value = item.name;

      }

    </script>

我添加了一个这样查看的表（表 2）：

最后是我的 ajax 工具包标签：

<asp:TextBox runat="server" ID="txtSearch" Width="261" />
        <cc1:AutoCompleteExtender ID="txtSearch_AutoCompleteExtender" runat="server"
DelimiterCharacters="" Enabled="True" ServicePath="WebService.asmx"
            FirstRowSelected="true"
             EnableCaching="false"
            ServiceMethod="GetResult"
MinimumPrefixLength="1"
       CompletionListCssClass="completionList"
     CompletionListHighlightedItemCssClass="itemHighlighted"
     CompletionListItemCssClass="listItem"
OnClientItemSelected="onSelected" OnClientPopulated="onPopulated"
            BehaviorID="ace" TargetControlID="txtSearch">
        </cc1:AutoCompleteExtender>

如何创建像 table-1 这样的表？请帮助我谢谢您的回答

【问题讨论】：

标签： c# html asp.net css ajaxcontroltoolkit

【解决方案1】：

我认为，以下链接可能对您有所帮助：http://vincexu.blogspot.com/2009/01/custom-autocomplete-6-multicolumn.html

用于记录粘贴上述文章中的代码。

ASPX

<head runat="server">
    <title></title>
    <link href="../Default.css" rel="stylesheet" type="text/css" />
    <style>
    .cloumnspan
    {
        width:35px;
        padding:0px;
        border-color:Black;
        border-style:solid;
        border-width:1px;

    }

    </style>
</head>
<body>
    <form id="form1"  runat="server">
        <ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" />

           <asp:TextBox runat="server" ID="myTextBox" Width="300" autocomplete="off" />
            <ajaxToolkit:AutoCompleteExtender
                runat="server"  OnClientPopulated="dd" OnClientItemSelected="itemSelected"
                BehaviorID="AutoCompleteEx"
                ID="autoComplete1" 
                TargetControlID="myTextBox"
                ServicePath="AutoComplete.asmx" 
                ServiceMethod="GetCompletionList5"
                MinimumPrefixLength="2" 
                CompletionInterval="1000"
                EnableCaching="true" 
                CompletionSetCount="8"
                CompletionListCssClass="autocomplete_completionListElement" 
                CompletionListItemCssClass="autocomplete_listItem" 
                CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
                DelimiterCharacters=";, :">
            </ajaxToolkit:AutoCompleteExtender>

    </form>
    <script type="text/javascript">
function itemSelected(ev)
{
    var index=$find("AutoCompleteEx")._selectIndex;
    var value=$find("AutoCompleteEx").get_completionList().childNodes[index]._value;
    $find("AutoCompleteEx").get_element().value = value;
}
function dd()
{
    var comletionList=$find("AutoCompleteEx").get_completionList();
    for(i=0;i<comletionList.childNodes.length;i++) {
        var itemobj=new Object();
        var _data = comletionList.childNodes[i]._value;
        itemobj.name= _data.substring(_data.lastIndexOf('|') + 1); // parse name as item value
        comletionList.childNodes[i]._value = itemobj.name;
        _data = _data.substring(0, _data.lastIndexOf('|'));
        itemobj.age = _data.substring(_data.lastIndexOf('|') + 1);
        _data = _data.substring(0, _data.lastIndexOf('|'));
        itemobj.id = _data.substring(_data.lastIndexOf('|') + 1);


        comletionList.childNodes[i].innerHTML = "<div class='cloumnspan' style='width:10%;float:left'>" + itemobj.id + "</div>"
                                              + "<div class='cloumnspan' style='width:70%;float:left'>" + itemobj.name + "</div>"
                                              + "<div class='cloumnspan' style='width:18%;'>" + itemobj.age + "</div>";

    }

}



</script>
</body>

网络方法：

[WebMethod]
public string[] GetCompletionList5(string prefixText, int count)
{

    if (count == 0)
    {
        count = 10;
    }

    if (prefixText.Equals("xyz"))
    {
        return new string[0];
    }

    Random random = new Random();
    List<string> items = new List<string>(count);

    for (int i = 0; i < count; i++)
    {

        char c1 = (char)random.Next(65, 90);
        char c2 = (char)random.Next(97, 122);
        char c3 = (char)random.Next(97, 122);
        int id = i;
        int age = random.Next(18, 70);
        items.Add(id.ToString() + "|" + age.ToString() + "|" + prefixText + c1 + c2 + c3);
    }

    return items.ToArray();
}

【讨论】：

感谢您的回答我是从 CSS 中完成的，例如 "width=300px !important" ，添加了 autocomplete_completionListElement div
（注意，我还没有标记这个，因为它有关键答案，但是......）虽然这个链接可能会回答这个问题，但最好在此处包含答案的基本部分并且提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。