get autocomplete feature with image like imdb.com?

How to get effect similar to imdb.com (search textbox).? i am trying to get image as well as movie name in autocomplete list.but how to make each li as clickable or assign url to each li?

i followed this link

Code i wrote is :

$("#<%=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];
            }
        });

and in ashx i wrote:

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());
            }
        }

---

ok i tried below code. as well as i updated my site with the code. but i get url only on image or text but not on full li. as well as i am not able to navigate to url. Result you can see on my site. I think i need to change the code of js file. Code i used in ht开发者_Go百科ml.

 $("#<%=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 i wrote.

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));
                    }
                }

this returns my url... if possible please guide me..

---

Try this:

$("#<%=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];
  }
});

With this CSS

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