在AutoCompleteExtender中像facebook一樣綁定圖像？

我有一個ajax AutoCompleteExtender。我能夠將文本與我的AutoCompleteExtender而不是圖像綁定。那麼我如何將圖像和文本綁定到ajax AutoCompleteExtender中？任何幫助是極大的讚賞。在AutoCompleteExtender中像facebook一樣綁定圖像？

來源

2012-12-11 Er Kapil Kaushik

你能發佈一些代碼嗎？你有什麼嘗試？ –

下方添加頁眉部分提到的文件

<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類，它會由web服務填寫並通過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; 
    } 

}

這是你的web服務，將您的jQuery automplete 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-11 09:05:28

被稱爲在你的搜索方法，你可以使用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; 
}

然後用一個JavaScript創建客戶端的img標籤：

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 = 」<img src=' + items[i]._value + ’ /><br />」; 

    items[i].appendChild(div); 
}

下面是一些例子：

來源

2012-12-11 22:31:59 maximpa

在AutoCompleteExtender中像facebook一樣綁定圖像？

回答

相關問題