コールバックajax jsonによるjQueryオートコンプリート

90

サーバーからajax jsonオブジェクトリストを介してデータを取得するコールバックソースでjQueryオートコンプリートを使用する方法を見つけようとしています。

誰かがいくつかの指示を与えることができますか？

私はそれをググりましたが、完全な解決策を見つけることができませんでした。

jquery  json  autocomplete 
— RollRoll
ソース

回答:

125

ソースコードを含むオートコンプリートドキュメントの完璧な例。

jQuery

<script>
  $(function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#city" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: "http://gd.geobytes.com/AutoCompleteCity",
          dataType: "jsonp",
          data: {
            q: request.term
          },
          success: function( data ) {
            response( data );
          }
        });
      },
      minLength: 3,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.label :
          "Nothing selected, input was " + this.value);
      },
      open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
      },
      close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
      }
    });
  });
</script>

HTML

<div class="ui-widget">
  <label for="city">Your city: </label>
  <input id="city">
  Powered by <a href="http://geonames.org">geonames.org</a>
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
— チャーリー
ソース
11
これはjquery UIの例です。
— Rafael Herscovici 2013
log（）の代わりにconsole.log（）があるはずです
— RN Kushwaha
4
@RNKushwaha気づいたら、上部にロギング用のという関数がありますlog。
— corsiKa 2016年
success: function( data ) {response( data );} works inside the ajax call. I mean, what is that response（） `関数の機能がわかりません か <li>データに応じていくつかの要素を作成しますが、その<li>要素をカスタマイズしたい場合はどうすればよいですか？属性のペアを追加したいのですが...
— SagittariusA
2
私はRailsで作業していて、コントローラーが返されます。format.json{render json：@ products.map（＆：name）.to_json}、そのために上記の例ではデータ型「jsonp」を削除する必要がありました仕事に。
— 率直
19

複雑なjsonオブジェクトを返す場合は、オートコンプリートの成功関数を次のように変更する必要があります。 

$.ajax({
    url: "/Employees/SearchEmployees",
    dataType: "json",
    data: {
        searchText: request.term
    },
    success: function (data) {
        response($.map(data.employees, function (item) {
            return {
                label: item.name,
                value: item.id
            };
        }));
    }
});
— シャナ
ソース
私にとってこれは空の結果を返しています。結果自体（空のテーブル）は、入力ボックスの下に示されるが、何もしているれていない。
— FrenkyB
10

私の問題は、ACPがデフォルトで設計されているため、提案が選択された場合、エンドユーザーがテキストボックスに入力を開始し、オートコンプリート（ACP）の提案を受け取り、呼び出しコントロールを更新することでした。ただし、エンドユーザーの選択に固有のデータを使用して、他の複数のコントロール（テキストボックス、ドロップダウンなど）も更新する必要がありました。私はこの問題のエレガントな解決策を見つけようと努力してきましたが、私が開発した解決策は共有する価値があると感じています。

WebMethod（SampleWM.aspx）：

  • 目的：

    • SQL Serverストアドプロシージャの結果をキャプチャしてJSON文字列としてAJAX呼び出し元に返すには

  • ノート：

    • Data.GetDataTableFromSP（）-ストアドプロシージャの結果からDataTableを返すカスタム関数です
    • <System.Web.Services.WebMethod（EnableSession：= True）> _
    • パブリック共有関数GetAutoCompleteData（ByVal QueryFilterAs String）As String
 //Call to custom function to return SP results as a DataTable
 // DataTable will consist of Field0 - Field5
 Dim params As ArrayList = New ArrayList
 params.Add("@QueryFilter|" & QueryFilter)
 Dim dt As DataTable = Data.GetDataTableFromSP("AutoComplete", params, [ConnStr])

 //Create a StringBuilder Obj to hold the JSON 
 //IE: [{"Field0":"0","Field1":"Test","Field2":"Jason","Field3":"Smith","Field4":"32","Field5":"888-555-1212"},{"Field0":"1","Field1":"Test2","Field2":"Jane","Field3":"Doe","Field4":"25","Field5":"888-555-1414"}]
 Dim jStr As StringBuilder = New StringBuilder

 //Loop the DataTable and convert row into JSON String
 If dt.Rows.Count > 0 Then
      jStr.Append("[")
      Dim RowCnt As Integer = 1
      For Each r As DataRow In dt.Rows
           jStr.Append("{")
           Dim ColCnt As Integer = 0
           For Each c As DataColumn In dt.Columns
               If ColCnt = 0 Then
                   jStr.Append("""" & c.ColumnName & """:""" & r(c.ColumnName) & """")
               Else
                   jStr.Append(",""" & c.ColumnName & """:""" & r(c.ColumnName) & """")
                End If
                ColCnt += 1
            Next

            If Not RowCnt = dt.Rows.Count Then
                jStr.Append("},")
            Else
                jStr.Append("}")
            End If

            RowCnt += 1
        Next

        jStr.Append("]")
    End If

    //Return JSON to WebMethod Caller
    Return jStr.ToString

AutoComplete jQuery（AutoComplete.aspx）：

  • 目的：
    • WebメソッドへのAjaxリクエストを実行してから、レスポンスを処理する
    $(function() {
      $("#LookUp").autocomplete({                
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "SampleWM.aspx/GetAutoCompleteData",
                    dataType: "json",
                    data:'{QueryFilter: "' + request.term  + '"}',
                    success: function (data) {
                        response($.map($.parseJSON(data.d), function (item) {                                
                            var AC = new Object();

                            //autocomplete default values REQUIRED
                            AC.label = item.Field0;
                            AC.value = item.Field1;

                            //extend values
                            AC.FirstName = item.Field2;
                            AC.LastName = item.Field3;
                            AC.Age = item.Field4;
                            AC.Phone = item.Field5;

                            return AC
                        }));       
                    }                                             
                });
            },
            minLength: 3,
            select: function (event, ui) {                    
                $("#txtFirstName").val(ui.item.FirstName);
                $("#txtLastName").val(ui.item.LastName);
                $("#ddlAge").val(ui.item.Age);
                $("#txtPhone").val(ui.item.Phone);
             }                    
        });
     });
— BigD
ソース
2 
$(document).on('keyup','#search_product',function(){
    $( "#search_product" ).autocomplete({
      source:function(request,response){
                  $.post("<?= base_url('ecommerce/autocomplete') ?>",{'name':$( "#search_product" ).val()}).done(function(data, status){

                    response(JSON.parse(data));
        });
      }
    });
});

PHPコード：

public function autocomplete(){
    $name=$_POST['name'];
    $result=$this->db->select('product_name,sku_code')->like('product_name',$name)->get('product_list')->result_array();
    $names=array();
    foreach($result as $row){
        $names[]=$row['product_name'];
    }
    echo json_encode($names);
}
— Web開発者Php
ソース
0

私はの構造を使用しました$.each (data [i], function (key, value) が、選択フィールドの名前をフォーム要素の名前と事前に一致させる必要があります。次に、「成功」後のループで、「データ」配列の要素をオート​​コンプリートします。これを行いました：Ajax成功のオートコンプリートフォーム

— アレクサンダー
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.