2

jQuery1.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>

クエリ文字列を使用して必要なデータを提供するページがあります。これは一時的なものですが、以前にベーシスタンスのオートコンプリートを使用したときに機能しました。

何か案は？

編集

ソースは、エントリを別々の行に出力するだけです。これで、出力は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で行っています。

4

4 に答える 4

6

JSON形式は非常に単純であることがわかりました。このページのデモを使用して、firebugの応答を確認できます：http：//jqueryui.com/demos/autocomplete/#event-change ..ここに1つの例があります：

[ 
{ "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ハンドラーを使用しました。通常のリクエストパイプラインを経由せず、代わりに2つの「要素」、プロパティ、およびと呼ばれるサブルーチンしかないため、これらの方が優れていると思います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

これを行う方法は他にもたくさんあると思いますが、これが私にとってうまくいった方法です。名前付き変数はjQueryのオートコンプリートで使用されるものであるため、AutocompleteItemCDTを使用します。デフォルトでは、とを使用idしvalueます。他に必要なものは何でも指定できますが、jQueryで提供されるイベントを使用して、自分でアイテムをフォーマットする必要があります。

幸い、.NETではデータをシリアル化できますが、PHPでも。を使用してシリアル化できますjson_encode。PHPの例は、jQueryUIのダウンロードにあります。

最後に、これが私が使用したjQueryです。高速なローカルサーバーであるため、遅延はゼロです。

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

うまくいけば、これはjQueryUI1.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 に答える