Question

一直在关注UI网站上的文档，看了一些教程并让我的代码有点工作，它是我想要的术语列表中的ajax，你可以选择一个，然后放置值，然后“ ，“。但是，之后它不再提示第二个值。

另外，当我输入一个部分并且弹出10个条目时，Tab键只会转到下一个表单字段，不知道我的.bind有什么问题，也许是一个设置？如果有人不介意看一看，我们将非常感激！

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

        function extractLast(term) {
            return split(term).pop();
        }

       jQuery('#tagSearch')
            .bind('keydown', function(event) {
                    if (event.keyCode === jQuery.ui.keyCode.TAB &&
                         jQuery(this).data('autocomplete').menu.active) {
                            event.preventDefault();
                    }
            })
           .autocomplete({
              autoFocus: true,
              source: function(request, add) {
                    console.log('source');
                    jQuery.getJSON('/get-tags-like.php?term_start=' + request.term, function(response) {
                        var possibleTerms = [];

                        jQuery.each(response, function(i, val) {
                            possibleTerms.push(val.name + ' ' + '(' + val.count + ')');
                        });

                        add(jQuery.map(possibleTerms, function(item) {
                            console.log(possibleTerms);
                            return item;
                        }));        
                    });
              },
              focus: function() {
                  console.log('focus');
                return false;
              },
              select: function(event, ui) {
                  console.log('select');
                  var terms = split(this.value);

                  terms.pop();

                  terms.push(ui.item.value);

                  terms.push('');

                  this.value = terms.join(',');

                  // At this point, example:
                  // Sony (5)
                var currentVal = this.value;

                  // Sony (5) - Gets inserted as "Sony"
                  currentVal = currentVal.replace(/\s\(.\)/, '');

                  this.value = currentVal;

                  return false;
              },
              minLength: 2
           });

Answer 1

然而，之后它不再提示第二个值。

确保输入的字符数超过2个。传递给search的函数阻止了少于两个字符的搜索导致搜索：

search: function() {
      var term = extractLast(this.value);

      if (term.length < 2) {
          return false;
      }
},

此外，当我输入一个部分并且弹出10个条目时，Tab键只会转到下一个表单字段，不确定我的.bind有什么问题，也许是一个设置？

开头的bind尝试阻止用户在突出显示自动填充候选项时从字段中进行制表。使用单值自动完成时，这通常不是问题，因为首先选择菜单项，将其置于input中，然后失去焦点。

当您需要input中的多个值时，这会发生变化。我们希望停止将焦点更改为下一个输入字段的keydown默认操作。

autocomplete有一个autoFocus选项，在这里很有用。当用户在输入后点击标签时，它将确保候选人总是被选中。

我无法完全复制你的情况，但是我创建了一个没有表现出你遇到的任何问题的演示（我真正做的就是改变源并添加{{ 1}}选项）：http://jsfiddle.net/zTVKC/

具有多个ajax'd值的jQuery自动完成

1 个答案: