自动完成 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>

我有一个页面，它使用查询字符串提供我想要的任何数据。它是临时的，但是当我之前使用 bassistence 的自动完成 时它就起作用了。

有什么想法吗？

---

编辑

源只是在单独的行上输出一个条目。现在输出采用 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 的子例程。

我这样做的方式是编写一个存储过程，它采用设置参数来确定我想要的自动完成内容。例如，如果我想使用自动完成器列出一些国家/地区，或者我想使用它列出员工姓名，那么我会传递特定的查询字符串来确定我想要返回的内容。这使得它非常灵活。

<%@ 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" }
]

Answer 3

你的例子还不够清楚。但是如果您使用 php 来填充自动完成变量，我只会在 javascript 中回显它：

Js:

var data = <?php echo $autocomplete ?>;

PHP

$autocomplete = '["val1", "val2", "val3"]';

但我不确定这是否是您正在寻找的答案。

Answer 4

$( "#someid" ).autocomplete({
     source: "something.php(aspx)?param1=param1¶m2=param2¶m3=param3",
     minLength: 1,
     select: function( event, ui ) {
         alert( "value: " + ui.item.value + " , id: " + ui.item.id );
     }
});