jQuery UI與類別的自動完成

我正在使用jQuery UI的自動完成從遠程源爲搜索輸入框提供建議。我有「遠程數據源」示例工作。例如，這個工程：jQuery UI與類別的自動完成

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

不過，我想用「Categories」例如，按類別的suggesions排序。從jQuery UI的網站，有一個內嵌的數據集的例子正常工作：

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

然而，當我嘗試從我的遠程文件

source: 'search.php'

不建議任何獲取數據。下面是用的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>

的數據search.php中被返回的格式正確無誤

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

任何幫助將不勝感激！

感謝，格雷格

來源

2010-10-10 user471262

我有同樣的問題。你是如何解決它的？ – 2015-05-07 18:52:46

你的PHP文件可能不會返回正確的標題。添加到您的PHP文件：然後

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

瀏覽器會解釋的響應，JSON，並採取行動。

編輯：

你的反應也需要有各地的唱片公司的報價，而不僅僅是值，在響應返回JSON時。在PHP中，使用對象的數組上json_encode()將返回以下JSON（換行補充）：

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

來源

2010-10-10 02:20:11

謝謝Clay，我沒有忘記search.php文件中的標題，但是，添加它並沒有解決問題。 -Greg – user471262 2010-10-10 03:46:32

更新了答案;問題是JSON格式。 – 2010-10-10 18:08:03

因爲我遷移到UI 1.10.2我的小部件did'nt工作！變成

self._renderItem(ul, item);

：

只是在線條修飾

self._renderItemData(ul, item);

這一次的作品！

來源

2013-04-26 07:40:50

這在jQuery UI 1.11中不起作用渲染項目數據呈現字段的html內容並且不能解決類別問題 – NinaNa 2014-08-28 09:14:49

這適用於1.11.2 – 2014-11-12 10:01:22

jQuery UI與類別的自動完成

回答

相關問題