jquery autocomplete

j'ai problème au sujet de autocompete jquery à distancejquery autocomplete

i obtenir un objet JSON du serveur dans ce 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"}]

Maintenant, ce que je dois faire est de montrer que les noms de l'université dans la liste de saisie semi-automatique et remplir l'identifiant correspondant dans un champ masqué lorsque l'utilisateur sélectionne l'université.

J'ai essayé de déplacer formatResult et formatItem avec cet objet json mais je n'ai pas réussi à comprendre comment effectuer une saisie semi-automatique.

Il serait utile si quelqu'un expliquer comment appliquer les méthodes formatResult et formatItem de jquery autocomplete avec des objets JSON

Merci

Source

2010-12-13 Gagan

source de données dynamiques en utilisant C# webmethod Voir ce post: http://stackoverflow.com/a/35620970/5978806 – Husen

je fais quelque chose de similaire, mais j'ai aussi des images dans mes résultats. Comme vous pouvez le voir, mon code prend en charge la sélection multiple.

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) 
    });

donc pour le vôtre, je voudrais essayer ce

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: Ajout de la fonction de résultat de mettre l'identifiant dans un champ caché

Source

2010-12-13 14:52:53 Josh

grâce josh pour une réponse rapide. Mais quand j'ai fait comme tu l'as dit, ça n'a pas bien marché. Je me formatItem et formatResult comme indiqué ci-dessous \t \t formatItem: function (rangée, i, n) { \t \t \t console.log (ligne); \t \t \t return row.name; \t \t}, \t \t formatResult: function (rangée, i, n) { \t \t \t row.name de retour; \t \t} < Je n'ai reçu qu'un seul journal du fichier console.log à l'intérieur de formatItem. Le journal est semblable à celui-ci ["[{" id ":" 4cd8d3b37adf3515c800003e "," name ":" University of Alberta "}, ........]"]. Si je ne me trompe pas, le journal est prévu pour imprimer tous les éléments à l'intérieur de l'objet json. – Gagan

Je pense aussi que la ligne arg de formatItem n'obtient pas de données dans le bon format. – Gagan

Vous pouvez utiliser un getJSON pour obtenir les données je puis utiliser quelque chose comme ça pour le rendre autocompléte

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

Incl Ude ces lignes

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

Source

2010-12-14 07:21:56 Tyde

jquery autocomplete

Répondre

Questions connexes