2010-09-24 86 views
0

上有jQuery UI的網站很好的文檔上顯示自動完成選項分類http://jqueryui.com/demos/autocomplete/#categories從遠程源jQuery UI的自動完成分類

而且也有關於顯示遠程建議的例子。 http://jqueryui.com/demos/autocomplete/#remote

但我想要的是加載從遠程來源分類的自動完成選項。我怎樣才能做到這一點?任何人可以指向我的例子或一些代碼片段?我一直在嘗試這一點。如果我的search.php可以生成分類建議所需的源。我如何在前端實現它?

我能產生從我的PHP回報這一點。(那是怎樣的需要分類自動完成)

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

但我怎麼在前端實現? 這是可用於網站中remotesource的代碼。 我如何指定PHP將分類建議的結果?

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

回答

1

jqueryui網站上的例子看起來像他們會工作。你試過了嗎?您只需按照類別示例中所示「覆蓋」_renderItem方法。

這是行不通的?

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

這不起作用。其實問題是與我的PHP ...因爲要求正在進行。 PHP應該返回什麼? – esafwan 2010-09-25 02:03:29

+0

你能幫我嗎? – esafwan 2010-09-25 18:18:43

0

如果請求轉到PHP和不返回任何東西,請確保您有正在由JQuery的發送回調值,並用JSON返回。

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