2

我正在玩弄 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 的 autocomplete时它起作用了。

有任何想法吗？

编辑

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

新自动完成的文档没有说明传递的查询字符串实际上称为“术语”（我从 search.php 文件中发现）。我在 VB.NET 中这样做。

4

4 回答 4

6

我发现 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" }
]
于 2010-06-07T06:25:36.447 回答
6

实际上，我应该为此编写一个教程，因为周围没有太多文档。如果您想在 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 对象，但是如果你不这样做，它会出于某种原因保留旧值，尽管用新值重新初始化变量。干杯。

于 2010-04-01T10:44:33.933 回答
1

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

JS：

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

PHP

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

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

于 2010-03-25T16:20:16.913 回答
0 
$( "#someid" ).autocomplete({
     source: "something.php(aspx)?param1=param1&param2=param2&param3=param3",
     minLength: 1,
     select: function( event, ui ) {
         alert( "value: " + ui.item.value + " , id: " + ui.item.id );
     }
});
于 2010-10-21T06:59:48.823 回答