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

时间:2019-03-01 21:02:21

标签: javascript jquery asp.net

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

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

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?

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

1 个答案:

答案 0 :(得分:0)

此链接可能会为您提供您想要实现的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);
};

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