2012-04-16 114 views
0

我有網格設置和工作很好。我想在JqGrid的表單視圖中添加多個輸入自動完成功能。多個自動完成工作,但extractLast功能似乎沒有工作,我可以添加重複輸入。 繼承人的代碼:Jqgrid + JQuery自動完成多輸入

var availableTags = [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "BASIC", 
     "C", 
     "C++", 
     "Clojure", 
     "COBOL", 
     "ColdFusion", 
     "Erlang", 
     "Fortran", 
     "Groovy", 
     "Haskell", 
     "Java", 
     "JavaScript", 
     "Lisp", 
     "Perl", 
     "PHP", 
     "Python", 
     "Ruby", 
     "Scala", 
     "Scheme" 
    ]; 
function split(val) { 
     return val.split(/,\s*/); 
     } 
     function extractLast(term) { 
      return split(term).pop(); 
     } 
     function autocomplete_element(value, options) { 
      // creating input element 
      var $ac = $('<input type="text"/>'); 
      // setting value to the one passed from jqGrid 
      $ac.val(value); 
      // creating autocomplete 
      $ac.autocomplete(
       {source: function(request, response) { 
       // delegate back to autocomplete, but extract the last term 
       response($.ui.autocomplete.filter(
        availableTags, extractLast(request.term))); 
      }, 

       focus: function() { 
        // prevent value inserted on focus 
        return false; 
       }, 
       select: function(event, ui) { 
        var terms = split(this.value); 
        // remove the current input 
        terms.pop(); 
        // add the selected item 
        terms.push(ui.item.value); 
        // add placeholder to get the comma-and-space at the end 
        terms.push(""); 
        this.value = terms.join(", "); 
        return false; 
       } 
      }); 
      // returning element back to jqGrid 
      return $ac; 
     } 
     function autocomplete_value(elem, op, value) { 
      if (op == "set") { 
      $(elem).val(value); 
      } 
      return $(elem).val(); 
     } 

電網colmodel:

{ 
       ... 
       editable: true, 
       edittype: "custom", 
       editoptions: { 
        custom_element: autocomplete_element, 
        custom_value: autocomplete_value 
       } 
      }, 

這是我從JQuery UI

German Rumm's blog

任何建議,發現了什麼?

已更新!

回答

0

它看起來像jQuery UI站點上的示例允許多次選擇相同的元素。問題出現在source函數中 - 它在創建建議列表時總是根據所有可用條件檢查最後一項。

修改select回調以僅顯示那些字段中不存在的術語。

source: function(request, response) { 
    var terms = request.terms.split(/,\s*/); 
    var last_term = terms.pop(); 

    var tags = $.grep(availableTags, function(el) { 
    return $.inArray(el, terms) == -1); 
    }); 

    response($.ui.autocomplete.filter(tags, last_term)) 
}