JQuery UI Autocomplete WebService Source renvoyant JSON

Question

J'ai essayé pendant deux mois de faire fonctionner ce code, et je suis proche, mais toujours confus. Je souhaite que la fonction JQuery UI Autocomplete appelle un service Web qui renvoie des données JSON et affiche ces données pour la sélection, et lors de la sélection, place la valeur sélectionnée dans un champ masqué.

Il existe plusieurs problèmes: 1) La fonction de saisie semi-automatique ne fonctionne pas 2) La source: "/AutoSuggest.asmx/DOTFind?" line renvoie une exception d'objet invalide 3) Le service nécessite deux paramètres: (chaîne prefixText, int count) - count lui indique le nombre d'enregistrements à renvoyer. 4) Je ne suis pas du tout certain que ce code acceptera les données JSON qui revient du service

Voici le code: <% @ Page Language = "C#" AutoEventWireup = "true" CodeFile = "Défaut2 .aspx.cs » Inherits = "Défaut2" %>

Untitled page

<script type="text/javascript"> 
    if ($) { 
     $(document).ready(
       function() { 
        $('h4').addClass('tmpFrameworkLoaded'); 
        $('h4').text('jQuery successfully loaded and running!'); 
       } 
      ); 
    } 

</script> 

<style> 
    .ui-autocomplete-loading 
    { 
     background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; 
    } 
</style> 
<div id="divDOTJQuery" runat="server"> 

    <script type="text/javascript"> 
     $(function() { 
      function log(message) { 
       alert(message); 
       $("<div/").text(message).prependTo("#log"); 
       $("#log").attr("scrollTop", 0); 
      } 
     }); 

     $("#dotmatch").autocomplete({ 
      source: "/AutoSuggest.asmx/DOTFind?", 
      minLength: 2, 
      select: function(event, ui) { 
       log(ui.item ? 
        "Selected: " + ui.item.value + " aka " + ui.item.id : 
        "Nothing selected, input was " + this.value); 
      } 
     }); 
    </script> 

    <div class="ui-widget"> 
     DOT Job Title or #: 
     <input type="text" id="dotmatch" /> 
     <input type="hidden" id="DOTNumber" name="DOTNumber" /> 
    </div> 
    <div class="ui-widget" style="margin-top: 2em; font-family: Arial"> 
     Results:<br /> 
     <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"> 
     </div> 
    </div> 
</div> 
</form> 

et voici le service Web:

[WebMethod(BufferResponse = true, Description = "Lookup a DOT record using part of DOT Number or DOT Title")] 
[ScriptMethod(ResponseFormat=ResponseFormat.Json)] 
public string DOTFind(string prefixText, int count) 
{ 
    if (count == 0) 
    { 
     count = 10; 
    } 
    DOT D = new DOT(); 

    DataView DV = D.View(prefixText, count); 
    List<DOT> items = new List<DOT>(); 
    foreach (DataRow DR in DV.Table.Rows) 
    { 
     items.Add(new DOT(SQL.ColumnToString(DR, "DOTNumber").Trim(),SQL.ColumnToString(DR, "JobTitle").Trim())); 
    } 
    DataContractJsonSerializer serializer = new DataContractJsonSerializer(items.GetType()); 
    MemoryStream ms = new MemoryStream(); 
    serializer.WriteObject(ms, items); 
    string jsonString = Encoding.Default.GetString(ms.ToArray()); 
    ms.Close(); 
    return jsonString; 
} 

Je profondément reconnaissant de toute aide à ce que vous pouvez offrir.

Merci,

Bob

Answer 1

Je vois que vous ne l'avez pas précisé que .autocomplete() devrait attendre application/json les données de votre service Web. Pour ce faire, en spécifiant dataType: "json" dans l'appel à .autocomplete().

$("#dotmatch").autocomplete({ 
     source: "/AutoSuggest.asmx/DOTFind?", 
     minLength: 2, 
     dataType: "json" //specify dataType 
     select: function(event, ui) { 
      log(ui.item ? 
       "Selected: " + ui.item.value + " aka " + ui.item.id : 
       "Nothing selected, input was " + this.value); 
     } 
    }); 

Answer 2

autocomplete utilise JSONP, pas JSON,

donc ajouter le paramètre callback = ?, ou tout ce que vous aimez

$("#dotmatch").autocomplete({ 
    source: "/AutoSuggest.asmx/DOTFind?callback=?", 
    minLength: 2, 
    select: function(event, ui) { 
     log(ui.item ? 
      "Selected: " + ui.item.value + " aka " + ui.item.id : 
      "Nothing selected, input was " + this.value); 
    } 
}); 

Dans un essai de webservice enveloppe JSON dans callback_value (YOUR_JSON);

Mais je ne suis pas sûr d'avoir des paramètres dans WebMethods, donc vous pouvez utiliser Generic Handler (ashx) à la place.

Answer 3

Le problème de "non-déclenchement du code" s'est avéré être facilement détectable lorsque j'ai utilisé FireFox et FireBug. Je pouvais voir que la ligne de tir de l'événement avait un problème pour lancer la demande. Quand j'ai réglé cette ligne, ça a commencé à tirer. Ensuite, j'ai rencontré une série de problèmes comme "ne peut pas utiliser GET - doit utiliser POST" et "Les données retournées commencent par un 'D'". J'ai travaillé à travers chacun d'entre eux et le code fonctionne maintenant. Quand tout sera nettoyé, je vais l'écrire et afficher le résultat quelque part. Peut-être ici.