1

我有一个 ajax AutoCompleteExtender。我只能用我的 AutoCompleteExtender 而不是图像来绑定文本。那么如何在 ajax AutoCompleteExtender 中绑定图像和文本？任何帮助是极大的赞赏。

4

2 回答 2

2

在标题部分添加以下提到的文件 

   <script type="text/javascript">


    $(document).ready(function () {




        $("#searchtext").autocomplete
       ({
           source:
          function (request, response) {
              $.ajax
              ({
                  url: "../BeanService.asmx/GetCompletionList",
                  data: "{prefixText:'" + request.term + "'}",   // term is the property that contains the entered text
                  dataType: "json",
                  type: "POST",
                  contentType: "application/json; charset=utf-8",
                  success: function (data) {



                      response(data["d"]);  // property d contains list of names sent from service
                      //$("#dynamiccontainer").append(data["d"]);


                  },
                  error: function (xhr, callStatus, errorThrown) {
                      // alert(callStatus);
                  }
              });
          },
           // Attempt to remove click/select functionality - may be a better way to do this        
           select: function (event, ui) {


               var mylink = ui.item.value;

               var doc = document.createElement("html");
               doc.innerHTML = mylink;
               var links = doc.getElementsByTagName("a")
               var urls = [];

               for (var i = 0; i < links.length; i++) {
                   urls.push(links[i].getAttribute("href"));
               }




               window.location.href = urls[0];


               return false;
           }


       });
    });

</script>

下面是将应用自动完成的文本框

<asp:TextBox ID="searchtext" runat="server"></asp:TextBox>

这是您的 bean 类，它将由 webservice 填充并通过 ajax 调用返回给 jquery 方法

public class SearchBean
{

    public int Id
    {
        get;
        set;
    }
    public string Title
    {
        get;
        set;
    }
    public string reUrl
    {
        get;
        set;
    }
    public string stype
    {
        get;
        set;
    }
    public string photoAdd
    {
        get;
        set;
    }

}

这是您的网络服务，将由您的 jquery 自动完成 ajax 方法调用

public string[] GetCompletionList(string prefixText)
{
    BDBEntities db = new BDBEntities();
    List<SearchBean> lstfinaldata = new List<SearchBean>();
    List<MaCatMaster> lstcatlist = db.MaCatMasters.Where(z => z.CatName.Contains(prefixText) && z.Status == true).ToList();



    foreach (MaCatMaster obj in lstcatlist)
    {
        SearchBean objbean = new SearchBean();
        objbean.Id = obj.Id;
        objbean.Title = obj.CatName;
        objbean.stype = "Category";
        objbean.reUrl = www.demo.com + "/Pages/Coupons/" + obj.Id;
        lstfinaldata.Add(objbean);
    }




    string[] st = new string[lstfinaldata.Count];
    int i = 0;


    foreach (SearchBean obj in lstfinaldata)
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("<html><body>");
        sb.AppendFormat("<a href='{0}' name='urllink'>", obj.reUrl);
        sb.Append("<table width='420px'>");
        sb.AppendFormat("<tr><td width='60px'><img src='{0}' style='border:1px solid #eeeeee' width='60px' height='40px'></td><td align='left' width='300px'>{1}</td><td align='left' width='60px' style='font-size:14px;'>{2}</td></tr>", obj.photoAdd, obj.Title, obj.stype);
        sb.Append("</table>");
        sb.Append("</a>");
        sb.Append("</body></html>");
        st[i] = sb.ToString();
        i++;
    }

    return st;

}
于 2012-12-11T09:05:28.973 回答
0

在您的搜索方法中，您可以使用AutoCompleteExtender.CreateAutoCompleteItem()方法创建要显示的文本对和图像路径：

public static List<string> Search(string prefixText, int count)
{
  var items = new List<string>();

  // ...

  items.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(
          text,
          imagePath));

  // ...

  return items;
}

然后img使用 javascript 在客户端创建标签：

function Items_Populated(sender, e) {

  var items = sender.get_completionList().childNodes;

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

    var div = document.createElement(“div”);
    div.innerHTML = ”&lt;img src=' + items[i]._value + ’ /><br />”;

    items[i].appendChild(div);
}

这里有些例子：

于 2012-12-11T22:31:59.813 回答