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

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

此外，当我输入部分内容并弹出 10 个条目时，选项卡只会转到下一个表单字段，不确定我的 .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 
           }); 

请您参考如下方法:

However, afterwards it doesn't prompt again for a second value.

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

search: function() { 
      var term = extractLast(this.value); 
 
      if (term.length < 2) { 
          return false; 
      } 
}, 

Also, when I enter a partial and say 10 entries pop up, tabbing just goes to the next form field, not sure what's wrong with my .bind, perhaps a setting?

开头的bind 试图阻止用户当自动完成候选突出显示时从字段中按 Tab 键。对于单值自动完成，这通常不是问题，因为首先选择菜单项并将其放置在输入中，然后焦点就会丢失。

当您想要在输入中输入多个值时，这种情况会发生变化。我们想要停止将焦点更改到下一个输入字段的 keydown 默认操作。

自动完成有一个 autoFocus此处有用的选项。它将确保当用户输入后点击 Tab 时，候选者始终被选中。

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