Автозаполнение JQuery 1.8-UI Формат JSON - PullRequest
2 голосов
/ 25 марта 2010

Я играю с новым автозаполнением в 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 .

Есть идеи?


EDIT

Источник просто выводит запись в отдельных строках. Теперь вывод делает это в формате 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 ]

6 голосов
/ 01 апреля 2010

Реально, я должен написать учебник для этого, потому что вокруг не так много документации.Если вы хотите использовать новое автозаполнение jQuery в jQuery-UI 1.8, то вот как вы это делаете.

Лично я использовал общий веб-обработчик.Я предполагаю, что они лучше, потому что они не проходят через обычный конвейер запросов и вместо этого имеют только два «элемента», свойство и подпрограмму с именем 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.Вы можете найти пример PHP в jQuery UI.

Наконец, вот 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.

EDIT Если у кого-нибудь есть рекомендации по улучшению универсального обработчика, не стесняйтесь показывать мне.Я замечаю, что каждый раз заново создаю экземпляр объекта AutocompleteItem, однако, если вы этого не сделаете, он по какой-то причине сохранит старые значения, несмотря на повторную инициализацию переменных с новыми значениями.Приветствия.

6 голосов
/ 07 июня 2010

Я нашел формат 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" }
]
1 голос
/ 25 марта 2010

Ваш пример не совсем понятен. Но если бы вы использовали php для заполнения переменных автозаполнения, я бы просто повторил это в javascript:

Js:

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

PHP

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

Но я не уверен, что это ответ, который вы ищете.

0 голосов
/ 21 октября 2010
$( "#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 );
     }
});
...