自动完成jQuery 1.8-UI JSON格式

Question

我正在使用jQuery 1.8-UI中的新自动完成功能.我提供了以下格式的数据

["val1", "val2", "val3"]

这来自存储过程但输出为字符串.但是,由于某种原因,如果我使用javascript变量提供相同的数据,这根本不起作用

var data = ["val1", "val2", "val3"];

然后这很好.

<script type="text/javascript">
  $(function()
    $("#txtClient").autocomplete({
      source: "/intranet/common/scripts/IntranetLists.aspx?ListType=C"
    });
  });
</script>

我有一个页面,使用查询字符串提供我想要的任何数据.这是暂时的,但是当我以前使用过bassism的自动完成功能时它会起作用.

有任何想法吗？

---

编辑

源只是在单独的行上输出一个条目.现在输出使用JSON格式.我不明白的是输入如何将数据作为查询提供给数据源.正如我说的,我用一个脚本应该被调用每次我进入一个新的关键时期.

这是我得到的代码(考虑到这与第三方自动完成插件一起工作正常)

<%
  Dim MyCmd As New dbExact("proc_Intranet_Lists")
  MyCmd.cmd.Parameters("@List").Value = Request.QueryString("ListType")
  If Request.QueryString("Top") <> Nothing Then
    MyCmd.cmd.Parameters("@Top").Value = Request.QueryString("Top")
  End If
  MyCmd.cmd.Parameters("@Code").Value = Request.QueryString("term")
  MyCmd.cmd.Connection.Open()

  Dim results As New StringBuilder()
  results.Append("[")
  Dim dr As SqlDataReader = MyCmd.cmd.ExecuteReader
  If dr.HasRows Then
    While dr.Read
      results.AppendLine("'" + dr(0).ToString() + "',")
    End While
  Else
    results.Append("None Found")
  End If
  results.Remove(results.Length - 2, 2)
  results.Append("]")
  Response.Write(results.ToString())
  results = Nothing
  MyCmd.cmd.Connection.Close()
  MyCmd = Nothing
%>

新自动完成的文档并未说明查询字符串传递的任何地方实际上称为"term"(我从search.php文件中找到).我在VB.NET中这样做.

Answer 1

实际上,我应该为此编写一个教程,因为周围没有太多文档.如果你想在jQuery-UI 1.8中使用jQuery的新自动完成,那么这就是你如何做到的.

就个人而言,我使用了通用的Web处理程序.我假设它们更好,因为它们不通过常规请求管道而只有两个"元素",一个属性和一个子程序调用ProcessRequest.

我这样做的方式是我写了一个存储过程,这需要设置的参数来确定什么我想要自动完成.例如,如果我想使用autocompleter列出一些国家,或者我想用它列出员工的姓名,然后我通过一定的查询字符串,以确定什么,我想回去.这使它非常灵活.

<%@ WebHandler Language="VB" Class="Autocomplete" %>

Imports System
Imports System.Web
Imports System.Collections.Generic
Imports System.Web.Script.Serialization

Public Class Autocomplete : Implements IHttpHandler

  Public Class AutocompleteItem
    Public id As String
    Public value As String
  End Class

  Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
    context.Response.ContentType = "text/plain"

    Dim conn As New SqlConnection(ConfigurationManager.ConnectionStrings("YourConnectionString").ToString)
    Dim cmd As New SqlCommand("YourStoredProcedure", conn)
    cmd.CommandType = CommandType.StoredProcedure
    With cmd.Parameters
      .Add(New SqlParameter("@List", 22, 10, 1, False, 0, 0, "", 512, context.Request.QueryString("ListType")))
      .Add(New SqlParameter("@Code", 22, 12, 1, False, 0, 0, "", 512, context.Request.QueryString("term")))
      .Add(New SqlParameter("@Top", 16, 0, 1, False, 0, 0, "", 512, context.Request.QueryString("Top")))
    End With
    conn.Open()

    Dim results As New StringBuilder()
    Dim dr As SqlDataReader = cmd.ExecuteReader
    Dim items As New List(Of AutocompleteItem)
    Dim serializer As New JavaScriptSerializer()

    While dr.Read
      Dim autocomplete As New AutocompleteItem
      autocomplete.id = dr(0)
      autocomplete.value = dr(1)
      items.Add(autocomplete)
    End While

    Dim arrayJson As String = serializer.Serialize(items)
    context.Response.Write(arrayJson)
    conn.Close()
  End Sub

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

我确信还有很多其他方法可以做到这一点,但这对我有用.我使用AutocompleteItem CDT,因为命名变量是jQuery的自动完成中使用的变量.默认情况下,它使用id和value.你可以指定任何你想要的东西,但是你必须自己使用jQuery中提供的事件来设置项目的格式.

幸运的是.NET允许您序列化数据,但您也可以在PHP中使用json_encode.您可以在jQuery UI下载中找到PHP示例.

最后,这是我使用的jQuery.我没有延迟,因为它是一个快速的本地服务器.

<script type="text/javascript">
    $(function() {
      $("#txtClient").autocomplete({
        source: "/intranet/common/scripts/Autocomplete.ashx?ListType=Addresses",
        minLength: 2,
        delay: 0
      });
    });
</script>

希望这可以帮助您使用jQuery UI 1.8的自动完成功能.

编辑 如果有人有任何关于如何改进通用处理程序的建议,请随时向我展示.我注意到每次都重新实例化AutocompleteItem对象,但是如果你不这样做,它会因某些原因保留旧值,尽管用新值重新初始化变量.干杯.

Answer 2

我发现JSON格式非常简单.您可以使用此页面上的演示查看firebug中的回复:http://jqueryui.com/demos/autocomplete/#event-change ..这是一个例子:

[ 
{ "id": "Erithacus rubecula", "label": "European Robin", "value": "European Robin" }, 
{ "id": "Cercotrichas galactotes", "label": "Rufous-Tailed Scrub Robin", "value": "Rufous-Tailed Scrub Robin" }, 
{ "id": "Irania gutturalis", "label": "White-throated Robin", "value": "White-throated Robin" }, 
{ "id": "Turdus migratorius", "label": "American Robin", "value": "American Robin" }
]