Jquery Autocomplete

i Problem über Remote-jquery autocompete habenJquery Autocomplete

ich bekommen ein Json-Objekt von dem Server in diesem Format

[{"id":"4cd8d3b37adf3515c800003e","name":"University of Alberta"}, 
{"id":"4cd8d3b37adf3515c800003f","name":"Athabasca University"}, 
{"id":"4cd8d3b37adf3515c8000040","name":"University of Calgary"}, 
{"id":"4cd8d3b37adf3515c8000041","name":"University of Lethbridge"}, 
{"id":"4cd8d3b37adf3515c8000042","name":"Mount Royal University"}, 
{"id":"4cd8d3b37adf3515c8000043","name":"University of Toronto"}, 
{"id":"4cd8d3b37adf3515c8000045","name":"Queens University"}, 
{"id":"4cd8d3b37adf3515c8000046","name":"University of Waterloo"}, 
{"id":"4cd8d3b37adf3515c8000047","name":"McGill University"}, 
{"id":"4cd8d3b37adf3515c8000048","name":"University of British Columbia"}, 
{"id":"4cd8d3b37adf3515c8000049","name":"University of Saskatchewan"}, 
{"id":"4cec8ead7adf3502a100001f","name":"University of Alberta"}]

jetzt, was ich nur tun müssen, ist, die Namen der Universität in der Show Autocomplete-Liste und füllen Sie die entsprechende ID in einem versteckten Feld, wenn der Benutzer die Universität auswählt.

Ich versuchte, um FormatResult und FormatItem mit diesem JSON-Objekt zu bewegen, aber konnte nicht herausfinden, wie Autocomplete.

Es wäre hilfreich, wenn jemand erklären, wie formatResult und FORMAT Methoden der jquery zur automatischen Vervollständigung anzuwenden mit json

Dank

Quelle

2010-12-13 Gagan

Dynamische Datenquelle mit C# Webmethod Beitrag Siehe: http://stackoverflow.com/a/35620970/5978806 – Husen

ich ähnliche etwas tun, Objekte, aber ich habe auch Bilder in meinen Ergebnissen. Wie Sie sehen können, unterstützt mein Code mehrere Auswahlmöglichkeiten.

formatItem: function (row, i, n) { 
      return '<table><tr><td valign="top"><img src="' + row.ImageUrl + '" /></td><td valign="top">' + row.DisplayName + '</td></tr></table>'; 
     }, 
formatResult: function (row, i, n) { 
      return row.Id; 
     } 
}).result(function (event, data, formatted) { 
     var results = $("#selectedItems").val(); 
     $("#selectedItems").val(results + ";" + data.Id) 
    });

so für sich, würde ich dieses versuchen

formatItem: function (row, i, n) { 
      return '<span>' + row.name+ '</span>'; 
     }, 
formatResult: function (row, i, n) { 
      return row.id; 
     } 
}).result(function (event, data, formatted) { 
     $("#myHiddenField").val(data.id) 
    });

EDIT: Hinzugefügt wird die Ergebnisfunktion der ID in ein verstecktes Feld zu setzen

Quelle

2010-12-13 14:52:53 Josh

Dank für die schnelle Antwort josh. Aber als ich getan habe, wie du gesagt hast, hat es nicht gut funktioniert. Ich habe mein FORMAT und formatResult wie unten angegeben \t \t FORMAT: Funktion (Zeile, i, n) { \t \t \t console.log (row); \t \t \t return row.name; \t \t}, \t \t formatResult: Funktion (Zeile, i, n) { \t \t \t return row.name; \t \t} < Ich habe nur ein Protokoll von der console.log in formatItem. Das Protokoll ist diesem ähnlich ["[{" id ":" 4cd8d3b37adf3515c800003e "," Name ":" University of Alberta "}, .........]"]. Wenn ich nicht falsch bin, wird das Protokoll gedruckt, um alle Elemente innerhalb des Json-Objekts zu drucken. – Gagan

Ich denke auch, dass das Zeilenarg von formatItem keine Daten im richtigen Format erhält. – Gagan

Sie ein getJSON die Daten zu erhalten, verwenden können ich und dann etwas so verwenden, um es zu autocompite

<body> 
    <br /><br />API Reference: <input id="example" /> (try "U")<br /><br /> 
    ID for selectet university <span id="UniID"></span> 
    <script type="text/javascript"> 
     $(function() { 
      $.getJSON('JSonUni.txt' , function(autoData) { // Get the data for autocomplite 
       $("#example").autocomplete(autoData, { 
        formatItem: function(item) { 
         return item.name; 
        } 
       }).result(function(event, item) { 
        $('#UniID').text(item.id); 
       }); 
      }); // end JSON 
     }); // End function 
    </script> 
</body>

Auch inkl ude diese Linien

<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" /> 
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>

Quelle

2010-12-14 07:21:56 Tyde

Jquery Autocomplete

Antwort

Verwandte Themen