Question

我有网格设置并且运行良好。我想在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();
        }

Grid colmodel：

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

我从JQuery UI

找到的

和German Rumm's blog

有什么建议吗？

已更新！

Answer 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))
}

Jqgrid + JQuery自动完成多个输入

1 个答案: