Application de saisie semi-automatique à l'interface utilisateur jQuery avec les catégories

Question

J'utilise Auto Complete de jQuery UI pour fournir des suggestions à partir d'une source distante pour une zone de saisie de recherche. J'ai l'exemple "remote datasource" qui fonctionne. Par exemple, cela fonctionne:

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

Cependant, je voudrais utiliser l'exemple « Categories » pour trier les suggesions par catégorie. L'exemple du site jQuery UI, avec un jeu en 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 je tente d'obtenir les données de mon fichier distant

source: 'search.php' 

il ne suggère rien . Voici le code avec le 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 qui search.php revient est formaté correctement:

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

Toute aide serait grandement appréciée!

Merci, Greg

Answer 1

Votre fichier PHP est probablement pas de retour l'en-tête droite. Ajoutez ceci à votre fichier PHP:

header('Content-Type: application/json'); 

Le navigateur interprétera alors la réponse comme JSON et agira sur elle.

EDIT:

Votre réponse doit également avoir des guillemets autour des étiquettes, pas seulement les valeurs, lors du retour JSON dans une réponse. En PHP, en utilisant json_encode() sur un tableau d'objets retourne le JSON suivant (linebreaks ajouté):

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

Answer 2

Depuis que je migré à l'assurance-chômage 1.10.2 mon widget de did'nt fonctionne!

Juste une modification de la ligne:

self._renderItem(ul, item); 

qui devient:

self._renderItemData(ul, item); 

Cela fonctionne à nouveau!