2012-04-16 112 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)) 
}