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

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的功能，而不是返回字符串数据，而是从您的.ashx代码返回JSON数据，如下所示：

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 个解决方案

解决方案1
0 2019-03-02 10:04:30

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

问题描述

1 个解决方案

解决方案1 0 2019-03-02 10:04:30

解决方案1
0 2019-03-02 10:04:30