Question

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

我写的代码是：

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

好吧我试过下面的代码。以及我用代码更新了我的网站。但我只在图像或文字上获取网址，但在完整的li上却没有。以及我无法导航到网址。您可以在我的网站上看到的结果。我想我需要更改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在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; }

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

1 个答案: