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

Question

一直在关注 UI 站点上的文档，查看了许多教程并让我的代码能够正常工作，它在我想要的术语列表中的 ajax 中，您可以选择一个并放置值，然后 " , ".但是，之后它不会再次提示输入第二个值。

另外，当我输入一个部分并说弹出 10 个条目时，tabbing 只是转到下一个表单字段，不确定我的 .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 个条目时，跳格只是转到下一个表单字段，不确定我的 .bind 有什么问题，也许是一个设置？

开头的bind 试图阻止用户在突出显示自动完成候选时从字段中切换。使用单值自动完成，这通常不是问题，因为首先选择了菜单项，将其放置在 input 中，然后焦点丢失。

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

autocomplete 有一个autoFocus 选项，在此处很有用。它将确保在用户键入后点击选项卡时始终选择候选人。

我无法完全复制您的情况，但我创建了一个演示，它没有显示您遇到的任何一个问题（我真正所做的只是更改源并添加 @987654331 @选项）：http://jsfiddle.net/zTVKC/