jQuery UI Kategorilerle Otomatik Tamamla

Question

JQuery UI'nin Otomatik Tamamla'yı kullanarak arama giriş kutusu için uzak bir kaynaktan önerilerde bulunuyorum. "Uzak veri kaynağı" örneğini çalışıyorum. Örneğin, bu çalışır:

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

Ancak, kategoriye göre önerilerin sıralamak için "Categories" örneğini kullanmak istiyorum. Verilerin bir satır içi seti ile jQuery UI sitesinden, örnek çalışıyor:

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

Ancak, bunun bir şeyi önermez

source: 'search.php' 

benim uzaktan dosyadan veri almak çalıştığınızda . İşte search.php ile kod:

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

veri search.php dönen doğru formatta olduğunu olduğunu:

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

Herhangi yardım büyük takdir!

sayesinde Greg

Answer 1

PHP dosyası muhtemelen doğru başlığını döndürmüyordur. PHP dosyasına ekleyin:

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

Tarayıcı, daha sonra JSON olarak tepkisini yorumlamak ve ona göre hareket edecektir.

DÜZENLEME:

Yanıtınız aynı zamanda bir tepki olarak JSON döndürürken, etiketler etrafında tırnak değil, sadece değerler olması gerekir. PHP aşağıdaki JSON dönecektir nesneler dizisi üzerinde json_encode() kullanarak (satır aralıkları eklendi):

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

Answer 2

Ben 1.10.2 benim Widget in iş UI göç beri! doğrultusunda

Sadece bir modifikasyon:

self._renderItem(ul, item); 

olur:

self._renderItemData(ul, item); 

tekrar çalışıyor!