獲得像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這樣的圖像的自動完成功能？

回答

相關問題