希望您能在这个小问题上对我有所帮助,我认为这更关乎我的逻辑。
我在网上找到了一些不错的入门代码,并且有一个漂亮的小文本框可以搜索表格,这种方法工作正常,应该向我返回产品名称和图片,我的问题是:
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?
非常感谢您的帮助。 预先感谢
答案 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);
};
希望这有助于...编码愉快。.