Question

希望您能在这个小问题上对我有所帮助，我认为这更关乎我的逻辑。

我在网上找到了一些不错的入门代码，并且有一个漂亮的小文本框可以搜索表格，这种方法工作正常，应该向我返回产品名称和图片，我的问题是：

a）如何导入图片？

b）选择一个项目后，如何将其重定向到该页面？

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#<%=txtSearch.ClientID%>").autocomplete("Search_VB.ashx", {
            width: 500,
            formatItem: function (data, i, n, value) {
                return "<img style = 'width:50px;height:50px' src='" + value.split("-")[1] + "'/> " + value.split("-")[0];
            },
            formatResult: function (data, value) {
                return value.split("-")[0];
            }
        });
    });
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
    <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>

它发布到的页面看起来像这样（Search_VB.ashx）：

Imports System
Imports System.Web
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Text

Public Class Search_VB : Implements IHttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
    Dim prefixText As String = context.Request.QueryString("q")
    Dim conn As SqlConnection = New SqlConnection
    conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim cmd As SqlCommand = New SqlCommand
    cmd.CommandText = ("select imgstr, name, sku, id, url from searchtbl where name like '%' + @SearchText + '%'")
    cmd.Parameters.AddWithValue("@SearchText", prefixText)
    cmd.Connection = conn
    Dim sb As StringBuilder = New StringBuilder
    conn.Open()
    Dim sdr As SqlDataReader = cmd.ExecuteReader

    While sdr.Read
        sb.Append(String.Format("{0} {1}-{2}", sdr("imgstr"), sdr("name"), sdr("sku"), Environment.NewLine))
    End While
    conn.Close()
    context.Response.Write(sb.ToString)
End Sub

Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
    Get
        Return False
    End Get
End Property
End Class

我怀疑这可能与拆分有关（对不起，我是新手），虽然可以正常工作，但图像未显示。另外，一旦选择了该项，我如何才能直接将页面触发到返回的URL？

非常感谢您的帮助。预先感谢

Answer 1

此链接可能会为您提供您想要实现的JQuery Autocomplete，而不是返回字符串数据，而是从JSON代码中返回.ashx数据，如下所示：

var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "image1.jpg"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "image2.jpg"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "image3.jpg"
}
];

注意：我已经从给定的自动完成链接示例中获取了此JSON。

使用此JSON数据作为自动完成的源，此外，自动完成具有扩展点_renderItem，可让您格式化自动完成项，下面是一个示例

$("#<%=txtSearch.ClientID%>").autocomplete(...<YOUR_CODE_TO_GET_JSON_DATA>...).autocomplete("instance")._renderItem = function (ul, item) {
return $("<li>")
.append("<a href='URL'><div><span><img src="+item.icon+"/></span>" + item.label + "<br>" + item.desc + "</div></a>")
.appendTo(ul);
};

希望这有助于...编码愉快。.

如何将该图像加载到自动完成文本框中？

1 个答案: