定製catcomplete犯規顯示結果時，包含多個類別

enter code here我試圖重現搜索建議中的Facebook。它顯示在不同'類型'與標題（個人，組，頁面，不同「類型」）的結果定製catcomplete犯規顯示結果時，包含多個類別

基本上我需要按類型對結果進行分組，並添加一個非可共享標題的名稱類型（例如：用戶，組）;就像Facebook並：

enter image description here

這是jQuery UI的頁面定製catcomplete：

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

CNC中

可以在這裏輸入 '集訓' 上serch主頁進行測試字段（不需要登錄）：http：// 209.51.221.243/integracion/login.php（類型'deya'的作品，類型'bootcamp'不起作用

Wich is work荷蘭國際集團罰款時，只有一種類型的結果，但是當這個響應是不止一個，如：

[{"value":"Donde puedo descargar los drivers de bootcamp?","id":"1","category":"Ayudas"}][{"value":"Donde puedo descargar los drivers de bootcamp?","id":"1","category":"Ayudas"},{"first_name":"bootcamp","last_name":"bootcamp","id":"95","value":"bootcamp bootcamp","category":"Usuarios"}]

它不顯示任何ressult，爲什麼呢？

來源

2012-06-03 Toni Michel Caubet

你的問題是什麼？你的代碼看起來不錯。什麼不工作？ – Gavriel

就是這樣，它按預期工作。它會在自動完成列表中顯示返回的項目。我試圖添加一個頭，讓用戶知道netxt項是類型（例如：persones，組，頁面，..） –

所以你的問題是如何與CSS樣式呢？ – Gavriel

在你的PHP只能加分，每種類型的第1行。你可以做到這一點與全局變量：

$first = array(); 

while (...) { 
    if (!$first[$row['type']]) { 
     $first[$row['type']] = true; 
     $row['sub'] = $row['type']; 
    } 
}

然後在你的JavaScript：

.data("autocomplete")._renderItem = function(ul, item) { 
      var sub = ""; 
      if (item.sub) { 
       sub = $("<li class="sub">" + item.sub + "</li>"); 
       ul.append(li); 
      } 
      var li = $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a><img src='"+item.img+"' /><span class='name'>" + item.value + "</span></a>") 
      ul.append(li); 
         };

來源

2012-06-03 22:14:55 Gavriel

嘿！感謝您的發佈。我只是做了一個編輯，它更容易理解與屏幕實現 –

我看到我只是追加一個沒有鏈接的李！這比我想象的容易！，但我不明白！$第一邏輯.. –

我的第一件事邏輯是這樣的：你只需要在該類型的X行的第一行之前的「空li」，但是在php中知道它更容易，但是在JavaScript中也可以使用相同的loginc和一些全局變量。 $ first是一個關聯數組，當你遇到一個類型（這是該類型的第一個元素）時，你設置它，所以下次你看到那個類型（同一類型的第二行）時，你不會添加另一個空li 。這個解決方案順便說一句，你的mysql會按照一種接一種的方式排序結果，而不是混合 – Gavriel

你可能想看看http://jquery-ui.googlecode.com/svn-history/r3820/trunk/demos/autocomplete/categories.html

$.extend($.ui.menu.prototype, { 
    next: function() { 
     this.move("next", ".ui-menu-item:first"); 
    }, 
    previous: function() { 
     this.move("prev", ".ui-menu-item:last"); 
    }, 
    move: function(direction, edge) { 
     if (!this.active) { 
      this.activate(this.element.children(edge)); 
      return; 
     } 
     var next = this.active[direction + "All"]('.ui-menu-item').eq(0); 
     if (next.length) { 
      this.activate(next); 
     } else { 
      this.activate(this.element.children(edge)); 
     } 
    } 
}); 

$.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({ 
     source: data 
    }); 
});

我幾乎忘了我創造了十分相似的東西的jsfiddle例如前陣子：jsFiddle example。

來源

2012-06-04 01:40:24 j08691

定製catcomplete犯規顯示結果時，包含多個類別

回答

相關問題