Jqgrid + JQuery 自动完成多输入

Posted 2023-02-24

【中文标题】Jqgrid + JQuery 自动完成多输入

【英文标题】：Jqgrid + JQuery Autocomplete multiple input

【发布时间】：2012-04-16 10:13:53

【问题描述】：

我已经设置好网格并且运行良好。我想在 JqGrid 的表单视图中添加多个输入自动完成功能。多个自动完成功能有效，但 extractLast 功能似乎不起作用，我可以添加重复的输入。 代码如下：

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();
        

网格模型：

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

我从JQuery UI找到的

和German Rumm's blog

有什么建议吗？

更新！

【参考方案1】：

看起来 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))