私は ajax AutoCompleteExtender を持っています。画像ではなく AutoCompleteExtender でのみテキストをバインドできます。では、画像とテキストを ajax AutoCompleteExtender にバインドするにはどうすればよいですか? どんな助けでも大歓迎です。
1341 次
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>
これは、webservice によって入力され、ajax 呼び出しを介して jquery メソッドに返される Bean クラスです。
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 automplete ajax メソッドによって呼び出される Web サービスです。
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
search メソッドでは、 method を使用して、表示するテキストと画像パス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 = ”<img src=' + items[i]._value + ’ /><br />”;
items[i].appendChild(div);
}
ここではいくつかの例を示します。
于 2012-12-11T22:31:59.813 に答える