获得像imdb.com这样的图像的自动完成功能？

如何获得与imdb.com（搜索文本框）类似的效果。我想在自动完成列表中获取图像以及电影名称。但是如何使每个li都可点击或将URL分配给每个li？获得像imdb.com这样的图像的自动完成功能？

的代码，我写的是：

$("#<%=txtsearchmovie.ClientID%>").autocomplete("SearchContents.ashx", { 
      width:300, 
      formatItem: function (data, i, n, value) { 
       return "<img style = 'width:100px;height:100px' src='" + value.split(",")[0] + "'/> " + value.split(",")[1]; 
      }, 
      formatResult: function (data, value) { 
       return value.split(",")[1]; 
      } 
     });

和ASHX我写道：

public void ProcessRequest(HttpContext context) 
    { 
     string prefixText = context.Request.QueryString["q"]; 
     using (SqlConnection conn = new SqlConnection()) 
     { 
      conn.ConnectionString = ConfigurationManager 
        .ConnectionStrings["ADO.NET.SqlExpress"].ConnectionString; 
      using (SqlCommand cmd = new SqlCommand()) 
      { 
       cmd.CommandText = "SearchQuery"; 
       cmd.Parameters.AddWithValue("@SearchText", prefixText); 
       cmd.Connection = conn; 
       StringBuilder sb = new StringBuilder(); 
       conn.Open(); 
       using (SqlDataReader sdr = cmd.ExecuteReader()) 
       { 
        while (sdr.Read()) 
        { 
         sb.Append(string.Format("{0},{1},{2},{3}", 
          sdr["ThumbNailUrl"], sdr["MovieName"], sdr["MovieId"], sdr["LanguageType"],Environment.NewLine)); 
        } 
       } 
       conn.Close(); 
       context.Response.Write(sb.ToString()); 
      } 
     }

确定我试过下面的代码。以及我用代码更新了我的网站。但我只在图片或文字上获取网址，但不是全部网址。以及我无法导航到网址。你可以在我的网站上看到结果。我想我需要更改js文件的代码。我在html中使用的代码。

$("#<%=txtsearchmovie.ClientID%>").autocomplete("SearchContents.ashx", { 
      width: 250, 
      formatItem: function (data, i, n, value) { 
       return "<a class='linkbutton' onclick='' href='" + value.split(",")[4] + "'><img class='ac_poster' src='" + value.split(",")[0] + "'/>" + "<div class='ac_moviename'>" + value.split(",")[1] + "</div></a>"; 
      }, 
      formatResult: function (data, value) { 
       return value.split(",")[1]; 
      } 
     });

ans in ashx我写道。

using (SqlDataReader sdr = cmd.ExecuteReader()) 
       { 
        while (sdr.Read()) 
        { 
         string newmovie = Convert.ToString(sdr["MovieName"]).Replace(" ", "-"); 
         string url = "Movies/"+sdr["LanguageType"]+"-Movies/"+sdr["MovieId"]+"/"+newmovie; 
         sb.Append(string.Format("{0},{1},{2},{3},{4}{5}", 
         sdr["ThumbNailUrl"], sdr["MovieName"], sdr["MovieId"], sdr["LanguageType"], url,Environment.NewLine)); 
        } 
       }

这将返回我的网址... 如果可能的话，请指导我..

来源

2011-07-02 Abhishek Ranjan

你可以与一些检查工具生成的HTML（例如与萤火虫）并粘贴在这里？您的网站是否可以从外部网址访问，以便人们可以检查并帮助您解决问题？ –

我还没有上传这个代码在我的网站它。因为它不工作，所以我没有更新我的网站。 –

好的，我上传了http://movie4u.in首页。现在它正在工作。但如何让每个李点击或分配给每个李？以及如何使文本成为底部？ –

试试这个：

$("#<%=txtsearchmovie.ClientID%>").autocomplete("SearchContents.ashx", { 
    width: 250, 
    formatItem: function (data, i, n, value) { 
    // value = "URL,THE TITLE ,##,LANGUAGE" 
    var v = value.split(","); 
    // http://movie4u.in/Movies/LANGUAGE-Movies/##/THE-TITLE 
    return "<a href='http://movie4u.in/Movies/" + v[3] + "-Movies/" + 
     v[2] + "/" + $.trim(v[1].replace(/\s/g,"-")) + "'><img class='ac_thumbs' src='" + 
     v[0] + "'/> " + v[1] + "</a>"; 
    }, 
    formatResult: function (data, value) { 
    return value.split(",")[1]; 
    } 
});

有了这个CSS

.ac_results li { font-size: 20px; } 
.ac_thumbs { width:75px; height:75px; vertical-align: middle; }

来源

2011-07-03 16:51:33 Mottie

获得像imdb.com这样的图像的自动完成功能？

回答

相关问题