如何在asp.net asmx中使用bootstrap typeahead?

时间:2014-01-20 05:48:28

标签: jquery asp.net twitter-bootstrap asmx

在我成功使用我的asmx将城市列表返回到jquery ui autocomplete插件之前。现在我切换到使用bootstrap 3.0,所以我也改为输入0.9.3并使用此插件进行了修改。 这是js:

$(document).ready(function () {
    $('#tbDestination').keyup(function (event) {
        $("input.typeahead").typeahead({
            source: function (typeahead, query) {
                $.get("http://booking.ilvestour.co.th/citysearch.asmx/SearchCity", { text: typeahead },
                function (data) {
                    return query(data.d);
                });
            }
        });
    });
});

asmx代码:

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
Imports System.Data.SqlClient
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class citysearch
    Inherits System.Web.Services.WebService
    <WebMethod()> _
    Public Function SearchCity(ByVal query As String) As List(Of String)
        Dim conn As SqlConnection = New SqlConnection
        conn.ConnectionString = ConfigurationManager.ConnectionStrings("hotelbedsConnectionString").ConnectionString
        Dim cmd As SqlCommand = New SqlCommand
        cmd.CommandText = "SELECT LocalizedDestination.DestinationRusName + '(' + LocalizedDestination.HBDestinationCode + ')' + ', ' + LocalizedCountryName.RusCountryName As Name FROM LocalizedDestination " & _
                          "INNER JOIN LocalizedCountryName On LocalizedDestination.HBCountryCode = LocalizedCountryName.HBCountryCode " & _
                          "WHERE LocalizedDestination.DestinationRusName LIKE '%' + @SearchText + '%'"
        cmd.Parameters.AddWithValue("@SearchText", query)
        cmd.Connection = conn
        conn.Open()
        Dim sdr As SqlDataReader = cmd.ExecuteReader
        Dim CountryNames As New List(Of String)()
        While sdr.Read
            CountryNames.Add(sdr("Name").ToString)
        End While
        conn.Close()
        Return CountryNames
    End Function
End Class

关于js。在firebug中,我可以看到第三个字符串(源:函数(typeahead,query){)它只是停止运行,然后没有任何错误消息或其他。 我不知道如何修复它。请指教。

P.S。我怀疑的其他东西是 - $('#tbDestination')。keyup(函数(事件),因为所有的例子都没有那个事件。但是如果我没有使用它,那么我在Firebug中就看不到任何动作。

更新 的 我稍微改变了js和asmx代码如下:

$(function () {
    $('.typeahead').typeahead({
        name: 'Names',
        remote: {
            url: 'http://booking.ilvestour.co.th/citysearch.asmx/SearchCity?q=%QUERY',
            filter: function (response) {
                return response;
            }
        },
        limit: 10
    });
})

<WebMethod()> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
Public Function SearchCity()
    Dim city = HttpContext.Current.Request.QueryString("q")
    Dim conn As SqlConnection = New SqlConnection
    conn.ConnectionString = ConfigurationManager.ConnectionStrings("hotelbedsConnectionString").ConnectionString
    Dim cmd As SqlCommand = New SqlCommand
    cmd.CommandText = "SELECT LocalizedDestination.DestinationRusName + '(' + LocalizedDestination.HBDestinationCode + ')' + ', ' + LocalizedCountryName.RusCountryName As Name FROM LocalizedDestination " & _
                      "INNER JOIN LocalizedCountryName On LocalizedDestination.HBCountryCode = LocalizedCountryName.HBCountryCode " & _
                      "WHERE LocalizedDestination.DestinationRusName LIKE '%' + @SearchText + '%'"
    cmd.Parameters.AddWithValue("@SearchText", city)
    cmd.Connection = conn
    conn.Open()
    Dim sdr As SqlDataReader = cmd.ExecuteReader
    Dim CountryNames As New List(Of String)()
    While sdr.Read
        CountryNames.Add(sdr("Name").ToString)
    End While
    conn.Close()
    Dim s As New JavaScriptSerializer
    Dim json = s.Serialize(CountryNames)
    Return json
End Function

现在我相信网络服务确实有正确答案。但我很困惑。根据文档“name”是数据集名称,但这里的数据集名称是什么?

0 个答案:

没有答案