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

Question

如何获得类似imdb.com（搜索文本框）的效果？ 我正在尝试在自动完成列表中获取图像和电影名称。但是如何使每个 li 可单击或为每个 li 分配 url？

我关注了 此链接< /a>

我写的代码是：

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

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

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

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