2012-07-12 51 views
0

隨着Aotocomplete,我想顯示的名稱(計數)作爲自動建議,當選擇的項目中,只有名稱被印刷在輸入box.My數據格式是這樣jQuery自動完成:如何顯示標籤計數?

[{"name":"Test","count":"5"},{"name":"Javascript","count":"1"}] 

的代碼,可以沒有計數顯示名,具有多選擇的項目印刷:

jQuery(document).ready(function ($){ 

    function split(val) { 
     return val.split(/,\s*/); 
    } 
    function extractLast(term) { 
     return split(term).pop(); 
    } 

    $("#ctags-input") 
     .bind("keydown", function(event) { 
      if (event.keyCode === $.ui.keyCode.TAB && 
        $(this).data("autocomplete").menu.active) { 
       event.preventDefault(); 
      } 
     }) 
    .autocomplete({ 

     source: function(req, add){ 
      var ctags_action = 'ctags_autosuggest'; 

      $.getJSON(CTags.url+'?callback=?&action='+ctags_action, req, function(data) { 

       var suggestions = []; 

       $.each(data, function(i, val){        
        suggestions.push(val.name); 
       }); 
       add(suggestions); 
      }); 
     }, 
     focus: function() { 
      return false; 
     }, 

     select: function(event, ui) { 
      var terms = split(this.value); 
      terms.pop(); 
      terms.push(ui.item.value); 
      terms.push(""); 
      this.value = terms.join(", "); 
      return false; 
     } 
    }); 

}); 

我試圖suggestions.push(val);它不工作。我也試過 suggestions.push(val.name + "C" + count + ")");這可以顯示名稱(計數),但選中時,(計數)也會被選中。我如何才能將顯示名稱(計數)僅顯示爲建議和輸入名稱?

回答

0

退房custom data and display demo。您可以使用多個值代碼與項目的標籤一起結合這個例子,顯示計數:

$("#ctags-input") 
    .bind("keydown", function (event) { 
     /* snip */ 
    }) 
.autocomplete({ 
    source: function(req, add){ 
     var ctags_action = 'ctags_autosuggest'; 

     $.getJSON(CTags.url+'?callback=?&action='+ctags_action, req, function(data) { 
      var suggestions = []; 

      $.each (data, function(i, val) {  
       suggestions.push({ 
        label: val.name, 
        count: val.count 
       }); 
      }); 

      add(suggestions); 
     }); 
    }, 
    /* snip */ 
}).data("autocomplete")._renderItem = function(ul, item) { 
    return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append("<a>" + item.label + " (" + item.count+ ")</a>") 
     .appendTo(ul); 
}; 

例子:http://jsfiddle.net/NwRR6/(不包括遠程部分)。

+0

謝謝!它完美的作品! – Jenny 2012-07-12 01:21:58

相關問題