wake-up-neo.net

Wie sieht die automatische Anfrage/Serverantwort aus?

Dies scheint ein schwarzes Loch zu sein: Nach einer Stunde der Suche nach der jQuery UI - Website, dem Stack Overflow und dem Googeln muss ich noch die grundlegendsten Informationen zum Schreiben der serverseite von finden der AutoVervollständigen.

Welcher Parameter wird an den Server übergeben und wie sollte die JSON-Antwort aussehen?

Mir muss etwas fehlen, denn wie haben alle gelernt, wie man das macht? Auf Websites wird offenbar nur der clientseitige JavaScript-Code und niemals das Protokoll oder serverseitige Beispiele behandelt.

Ich brauche genug, um das einfachste Remote-Beispiel zum Laufen zu bringen.

60
Pete Alvin

Welcher Parameter wird an den Server übergeben

Sie müssen request.term an Ihren serverseitigen Code übergeben (aus der Dokumentation): 

Ein Anforderungsobjekt mit einem einzelnen Eigenschaft namens "Begriff", die verweist auf den aktuellen Wert im Text Eingang.

Grundsätzlich haben Sie in Ihrem autocomplete-Code Folgendes:

$("#autocomplete").autocomplete({
    // request.term needs to be passed up to the server.
    source: function(request, response) { ... }
});

und wie sollte die JSON-Antwort aussehen mögen?

Das Widget autocomplete erwartet ein Array von JSON-Objekten mit den Eigenschaften label und value (wenn Sie jedoch lediglich value angeben, wird es als Beschriftung verwendet). Im einfachsten Fall können Sie also Daten zurückgeben, die folgendermaßen aussehen:

[
    { label: 'C++', value: 'C++' }, 
    { label: 'Java', value: 'Java' }
    { label: 'COBOL', value: 'COBOL' }
]

Wenn Sie etwas Komplizierteres benötigen, können Sie das success-Argument der $.ajax-Funktion verwenden, um die Daten zu normalisieren, die Sie zurückerhalten, bevor die automatische Vervollständigung sie erhält:

source: function( request, response ) {
    $.ajax({
        /* Snip */
        success: function(data) {
            response($.map( data.geonames, function( item ) {
                return {
                    label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                    value: item.name
                }
            }));
         }
    });

Dieser Code stammt aus dem Beispiel here (Dies ist ein gutes Beispiel, wenn ajax + autocomplete in einem komplexeren Szenario funktioniert). 

Im Grunde geht es darum, dass bei einer erfolgreichen Ajax-Anforderung die empfangenen Daten (mit $.map) auf das gewartet werden, was das Autocomplete-Widget erwartet.

Hoffentlich hilft das.

67
Andrew Whitaker

Neben Andrew Whitakers perfekter Antwort besteht die Alternative zu $ ​​.map darin, den Renderer zu überschreiben. Ein Beispiel dafür wird auf der Demo-Seite der jQuery-Benutzeroberfläche angezeigt.

Ich habe diese Funktion mit einem JSON-Aufruf wie folgt verwendet:

JSON-Antwort

{
   "Records": [
       {
           "WI_ID": "1",
           "Project": "ExampleProject",
           "Work_Item": "ExampleWorkItem",
           "Purchase_Order": "",
           "Price": "",
           "Comments": "",
           "Quoted_Hours": "",
           "Estimated_Hours": "",
           "Achieved": "False",
           "Used_Hours": "0"
       }
   ]
}

jQuery

$("#WorkItem").autocomplete({
      source: function(request, response){
           $.ajax({
               type: "POST",
               url: "ASPWebServiceURL.asmx/WorkItems",
               data: "{'Project_ID':'1'}",
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               success: function (msg) {
                   response($.parseJSON(msg.d).Records);
               },
               error: function (msg) {
                   alert(msg.status + ' ' + msg.statusText);
               }
           })
       },

       select: function (event, ui) {
           $("#WorkItem").val(ui.item.Work_Item);
           return false;
       }
})
.data("autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
    .data("item.autocomplete", item)
    .append("<a>" + item.Work_Item + "</a>")
    .appendTo(ul);
};

In diesem Beispiel wird die Funktion _renderItem überschrieben, sodass die Suchergebnisliste (d. H. Die Liste, die unter dem Textfeld angezeigt wird) mithilfe der Attribute der Datensätze gefüllt wird, die ich aus der JSON-Antwort abgerufen habe.

Auch wenn dies nicht so einfach ist, können Sie einige interessante Informationen abrufen (z. B. mehrere Datenbits aus einer JSON-Antwort).

24
James Boyden

Beide Antworten sind bisher komplex und irreführend. Ein Schlüsselverständnis für jQuery UI Auto Complete ist die anonyme Erfolgsfunktion. Sie haben das Format Ihrer serverseitigen JSON-Antwort aufgrund des erfolgreichen Rückrufs von AutoComplete wirksam. Das Label-Wert-Format ist eine gute Wahl, aber Sie können jedes beliebige JSON-Format definieren, das Sie möchten. Der Schlüssel ist, wie Sie Ihre Erfolgsfunktion definieren:

 <input id="refPaymentTerms" class="form-control">

$("#refPaymentTerms").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        url: "/admin/JobPaymentRefs",
                        dataType: "json",
                        data: {
                            term: request.termCode
                        },
                        error: function (xhr, textStatus, errorThrown) {
                            alert('Error: ' + xhr.responseText);
                        },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.label,
                                    value: item.value
                                }
                            }));
                        }
                    });
                }
            });

MVC-Controller:

public JsonResult JobPaymentRefs()
    {
        var query = from REFTerm in _db.REFTerms
                     select new
                    {
                        label = REFTerm.TermCode,
                        value = REFTerm.TermCode
                    };
        //var refTerms = _db.REFTerms.Select(x => x.TermCode);

        return Json(query.ToArray());
    }

Hier sehen wir eine sehr standardmäßige automatische vollständige Bindung mit einem ASP.NET-Backend.

Sie können das gewünschte JSON-Format auf der Serverseite zurückgeben, sofern Sie es im anonymen AutoComplete-Rückruf korrekt zuordnen. Das Label-Wert-Name-Wert-Paar ist für die meisten Anforderungen gut genug, tun Sie dies jedoch auf der Serverseite mit Ihrem JSON, und ordnen Sie es im AutoComplete-Erfolgsrückruf korrekt zu.

7
Brian Ogden

Sie sind nicht erforderlich, um das serverseitige Skript zu optimieren, um die automatische Vervollständigung der jQuery-Benutzeroberfläche zu verwenden. Sie können eine JavaScript-Funktion als source angeben, um benutzerdefinierte Anforderungen zu erstellen (z. B. use POST oder GET, verwenden Sie Abfragezeichenfolgeparameter, die das Serever-Side-Skript erwartet) und beliebige Antworten abzuarbeiten ( zB XML-Antworten behandeln).

Wenn Sie eine Zeichenfolge als source-Parameter verwenden, gilt Folgendes:

[...] das Autocomplete-Plugin erwartet, dass diese Zeichenfolge auf eine URL verweist Ressource, die JSON-Daten zurückgibt. Es kann sich auf demselben Host oder auf .__ befinden. eine andere (muss JSONP bereitstellen). Das Autocomplete-Plugin hat keine filtern Sie die Ergebnisse, stattdessen wird eine Abfragezeichenfolge mit einem term -Feld (.__) hinzugefügt. welches das serverseitige Skript zum Filtern der Ergebnisse verwenden soll. Zum Beispiel, wenn die Quellenoption auf http://example.com und die .__ eingestellt ist. Benutzer schreibt foo, eine GET-Anfrage würde an .__ gestellt werden. http://example.com?term=foo. Die Daten selbst können das gleiche Format haben als die oben beschriebenen lokalen Daten.

In Bezug auf "Die Daten selbst können in demselben Format wie die oben beschriebenen lokalen Daten vorliegen", die folgenden JSON- (oder JSONP) -Formate funktionieren:

// no matching entries
[]

// array of strings
[
"Option 1",
"Option 2"
]

// array of objects with label property
[{
    "label": "Option 1"
}, {
    "label": "Option 2"
}]

// array of objects with value property
[{
    "value": "Option 1"
}, {
    "value": "Option 2"
}]

// array of objects with label and value properties
[{
    "label": "Option 1",
    "value": 1
}, {
    "label": "Option 2",
    "value": 2
}]

Für die Arrays von Objekten können Sie neben label und/oder value weitere Eigenschaften angeben. Alle Eigenschaften sind in Callbacks verfügbar.

2
Salman A

Der folgende Code funktioniert für mich. Dies erfordert json-codierte Daten. Sobald wir Daten erhalten haben, werden diese gemäß dem jQuery-Format für automatische Vervollständigung geändert und die Auswahl ermöglicht

var $url = "http://some-url/get-json";
//name is the id of the textbox where autocomplete needs to be shown
$('#name').autocomplete(
{ 
source: function(request,response)  
{ 

  //gets data from the url in JSON format
  $.get($url, function(data)
  {         
    obj = JSON.parse(data);   //parse the data in JSON (if not already)
    response($.map(obj, function(item)
    {
      return {
        label: item.full_name,
        value: item.full_name,
        id:item.id,
        email:item.email,
        phone:item.phone,
      }
    }
  ));        //end response
});          //end get
},
select:function(event, ui)
{ 
 console.log(ui.item.full_name);
 console.log(ui.item.email);
}   

}); //end of autocomplete
1
Nava Bogatee
<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Autocomplete - Categories</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <style>
            .ui-autocomplete-category {
                font-weight: bold;
                padding: .2em .4em;
                margin: .8em 0 .2em;
                line-height: 1.5;
            }
            body {
                font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
                font-size: 62.5%;
            }
        </style>
        <script>
            $.widget("custom.catcomplete", $.ui.autocomplete, {
                _renderMenu : function(ul, items) {
                    var that = this, currentCategory = "";
                    $.each(items, function(index, item) {
                        if (item.category != currentCategory) {
                            ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                            currentCategory = item.category;
                        }
                        that._renderItemData(ul, item);
                    });
                }
            });
        </script>
        <script>
            $(function() {
                $("#search").catcomplete({
                    delay : 0,
                    source : function(request, response) {
                        $.ajax({
                            url : "search",
                            dataType : "json",
                            data :"searchText=hk",
                            success : function(data) {
                                response(data);
                            } //success
                        });
                    }
                });
            });
        </script>
    </head>
    <body>enter code here
        <label for="search">Search: </label>
        <input id="search" />
    </body>
</html>
0
Hari Agarwal

Das folgende Autocomplete stammt von https://jqueryui.com/autocomplete/#remote-jsonp

Ein Demo-Link: https://jqueryui.com/resources/demos/autocomplete/remote-jsonp.html

Hier ist der Quellcode:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Autocomplete - Remote JSONP datasource</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>
    .ui-autocomplete-loading {
        background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
    }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
    $( function() {
        function log( message ) {
            $( "<div>" ).text( message ).prependTo( "#log" );
            $( "#log" ).scrollTop( 0 );
        }

        $( "#birds" ).autocomplete({
            source: function( request, response ) {
                $.ajax( {
                    url: "search.php",
                    dataType: "jsonp",
                    data: {
                        term: request.term
                    },
                    success: function( data ) {
                        response( data );
                    }
                } );
            },
            minLength: 2,
            select: function( event, ui ) {
                log( "Selected: " + ui.item.value + " aka " + ui.item.id );
            }
        } );
    } );
    </script>
</head>
<body>

<div class="ui-widget">
    <label for="birds">Birds: </label>
    <input id="birds">
</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>


</body>
</html>

0
caot