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

具有多个ajax值的jQuery自动完成,jquery,ajax,jquery-ui,autocomplete,jquery-ui-autocomplete,Jquery,Ajax,Jquery Ui,Autocomplete,Jquery Ui Autocomplete,我一直在关注UI站点上的文档,并查看了大量教程,我的代码运行正常,它在我想要的术语列表中,您可以选择一个,它会放置值,然后。但是,之后它不会再次提示输入第二个值 另外,当我输入一个部分并弹出10个条目时,制表符只会转到下一个表单字段,不确定我的.bind有什么问题,可能是一个设置?如果有人不介意看一看,我将不胜感激 function split(val) { return val.split(/,\s*/); } function ext

我一直在关注UI站点上的文档,并查看了大量教程,我的代码运行正常,它在我想要的术语列表中,您可以选择一个,它会放置值,然后。但是,之后它不会再次提示输入第二个值

另外,当我输入一个部分并弹出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
           });
但是,之后它不会再次提示输入第二个值

确保键入的字符超过2个。传递给search的函数用于防止少于两个字符的搜索导致搜索:

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

      if (term.length < 2) {
          return false;
      }
},
另外,当我输入一个部分并弹出10个条目时,制表符只会转到下一个表单字段,不确定我的.bind有什么问题,可能是一个设置

开始时的绑定试图防止用户在突出显示自动完成候选项时从字段中切换。对于单值自动完成,这通常不是问题,因为首先选择菜单项,将其放入输入,然后失去焦点

当需要在输入中输入多个值时,此选项会更改。我们希望停止keydown的默认操作,该操作将焦点更改为下一个输入字段

autocomplete有一个在这里很有用的选项。它将确保用户在键入后点击选项卡时始终选中候选人


我无法准确地复制您的情况,但我创建了一个演示,它不会显示您遇到的任何一个问题。我真正做的就是更改源并添加自动聚焦选项:

自动完成的按键事件绑定会干扰您的吗?@John:有趣。。。也许这就是你要找的?如果你搜索两次同样的东西,结果应该是一样的,那会有什么不同吗?你是否尝试过使用Firebug这样的工具来调试AJAX成功?你的服务器端代码返回的是真的,还是回调中发生的后处理结果?没问题,我也想弄清楚。我看到你的编辑。。。你不需要打电话给地图。这段代码是不是在某个公共URL上?我已经修复了!在源函数的开头设置request.term=extractLastrequest.term。我再次感谢所有的帮助!