получить функцию автозаполнения с изображением, как imdb.com?

Question

Как получить эффект, аналогичный imdb.com (текстовое поле поиска).? я пытаюсь получить изображение, а также название фильма в autocomplete list.но как сделать каждый li как кликабельный или назначить URL каждому li?

я следовал по этой ссылке

Код, который я написал:

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

и в аш я написал:

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

---

хорошо, я попробовал код ниже. а также я обновил свой сайт с кодом. но я получаю URL только на изображение или текст, но не на полную ли. а также я не могу перейти к URL. Результат вы можете увидеть на моем сайте. Я думаю, что мне нужно изменить код файла 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];
            }
        });

и я пишу в аш.

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

это возвращает мой URL ... если возможно, пожалуйста, наведите меня ..

Answer 1

Попробуйте это:

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