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's 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
%>

新自动填充的文档并未说明查询字符串传递的任何地方实际上称为“term”（我从search.php文件中找到）。我在VB.NET中这样做。

Answer 1

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

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

我这样做是因为我编写了一个存储过程，它使用set参数来确定我想要的自动完成。例如，如果我想使用自动填充程序列出一些国家/地区，或者我想用它来列出员工的姓名，那么我会传递一个查询字符串以确定我想要的。这使它非常灵活。

<%@ 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允许您序列化数据，但您也可以使用json_encode在PHP中执行此操作。您可以在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&param2=param2&param3=param3",
     minLength: 1,
     select: function( event, ui ) {
         alert( "value: " + ui.item.value + " , id: " + ui.item.id );
     }
});

自动完成jQuery 1.8-UI JSON格式

4 个答案: