jQuery UI Autocomplete de source distante catégorisé

Question

Il y a bonne documentation sur le site jquery ui sur affiche les options de remplissage automatique classés http://jqueryui.com/demos/autocomplete/#categories

Et il y a aussi un exemple de montrer des suggestions à distance. Mais ce que je veux, c'est charger des options de remplissage automatique classées d'une source distante. Comment puis je faire ça? Quelqu'un peut-il me diriger vers un exemple ou un fragment de code? J'essaye cela depuis longtemps. Si mon search.php peut générer cette source nécessaire pour la suggestion catégorisée. Comment puis-je l'implémenter à l'avant?

Je suis en mesure de générer un rendement cela de mon php. (C'est comment le nécessaire pour catégorisés autocomplete)

    [ 
    { 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" } 
    ]; 

Mais comment puis-je mettre en œuvre dans le front-end? Ceci est le code disponible pour la remotesource dans le site. Comment puis-je spécifier que le PHP donnera des résultats pour une suggestion catégorisée?

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

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

Answer 1

Les exemples sur le site jqueryui semblent fonctionner. L'as tu essayé? Vous avez juste besoin de "surcharger" la méthode _renderItem comme indiqué dans l'exemple de catégorie.

Est-ce que cela fonctionne?

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

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

Answer 2

Si la demande va à PHP et ne retourne rien, assurez-vous que vous avez une valeur de rappel qui est envoyé par JQuery, et le retourner avec JSON.

$callback = $_GET['callback']; 
$echo $callback.'('.json_encode($yourresultarray).')';