jQuery UI Autocomplete avec des Catégories

J'utilise jQuery UI Automatique Complète pour fournir des suggestions à partir d'une source distante pour une recherche d'entrée de la boîte. J'ai eu la "distance de la source de données" exemple de travail. Par exemple, cela fonctionne:

    $("#search").autocomplete({
        source: "search_basic.php",
        minLength: 2
    });

Cependant, je voudrais utiliser le "Catégories" exemple pour trier les suggesions par catégorie. L'exemple de l'INTERFACE utilisateur de jQuery site, avec une ligne de données fonctionne très bien:

       <script>
 $.widget( "custom.catcomplete", $.ui.autocomplete, {
  _renderMenu: function( ul, items ) {
   var self = this,
    currentCategory = "";
   $.each( items, function( index, item ) {
    if ( item.category != currentCategory ) {
     ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
     currentCategory = item.category;
    }
    self._renderItem( ul, item );
   });
  }
 });

 $(function() {
  var data = [
   { label: "anders", category: "" },
   { label: "andreas", category: "" },
   { label: "antal", category: "" },
   { label: "annhhx10", category: "Products" },
   { label: "annk K12", category: "Products" },
   { label: "annttop C13", category: "Products" },
   { label: "anders andersson", category: "People" },
   { label: "andreas andersson", category: "People" },
   { label: "andreas johnson", category: "People" }
  ];

  $( "#search" ).catcomplete({
   delay: 0,
   source: data
  });
 });
 </script>

Cependant, lorsque j'essaie de récupérer les données de mon fichier distant

source: 'search.php'

ne pas suggérer quoi que ce soit. Voici le code avec la search.php:

    <script>
 $.widget( "custom.catcomplete", $.ui.autocomplete, {
  _renderMenu: function( ul, items ) {
   var self = this,
    currentCategory = "";
   $.each( items, function( index, item ) {
    if ( item.category != currentCategory ) {
     ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
     currentCategory = item.category;
    }
    self._renderItem( ul, item );
   });
  }
 });

 $(function() {

  $( "#search" ).catcomplete({
   source: 'search.php'
  });
 });
 </script>

Les données search.php est de retour est correctement mis en forme:

         [
 { label: "annhhx10", category: "Products" },
 { label: "annttop", category: "Products" },
 { label: "anders", category: "People" },
 { label: "andreas", category: "People" }
 ]

Toute aide serait grandement appréciée!

Grâce,
Greg

J'ai le même problème. Comment avez-vous résolu?

OriginalL'auteur user471262 | 2010-10-10

6

Depuis que j'ai migré de l'INTERFACE utilisateur 1.10.2 mon widget ne marche pas !

Simplement une modification dans la ligne :
```
self._renderItem( ul, item );
```
qui devient :
```
self._renderItemData( ul, item );
```
Qui fonctionne encore !

Cela ne fonctionne pas dans l'INTERFACE utilisateur de jQuery 1.11 élément de rendu des données rend le contenu html du champ et ne résout pas la catégorie de problème
cela fonctionne pour 1.11.2

OriginalL'auteur Le Moineau
1

Votre fichier PHP n'est probablement pas le retour de la droite de l'en-tête. Ajouter ceci à votre fichier PHP:
```
header('Content-Type: application/json');
```
Le navigateur va alors interpréter la réponse JSON et d'agir sur elle.

EDIT:

Votre réponse doit également avoir des guillemets autour des étiquettes, et pas seulement les valeurs, lors du retour JSON dans une réponse.
En PHP, à l'aide de json_encode() sur un tableau d'objets sera de retour le JSON suivants (retours à la ligne (ajouté):
```
[
 { "label": "annhhx10", "category": "Products" },
 { "label": "annttop", "category": "Products" },
 { "label": "anders", "category": "People" },
 { "label": "andreas", "category": "People" }
]
```
Merci d'Argile, j'ai fait oublier l'en-tête dans le search.php fichier, toutefois, ajoutant qu'il n'a pas résolu le problème. -Greg
mise à jour de la réponse; le problème était le format JSON.

OriginalL'auteur Clay Hinson

Vous devez vous connecter pour publier un commentaire.