具有多个ajax'd值的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是试图阻止用户在自动完成候选突出显示时从字段中进行 Tab 键切换。对于单值自动完成，这通常不是问题，因为首先选择菜单项并将其放置在 中input，然后焦点就会丢失。

当您想要在input. 我们想要停止将keydown焦点更改到下一个输入字段的默认操作。

autocomplete有一个autoFocus在这里有用的选项。它将确保当用户输入后点击选项卡时始终选择候选者。

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