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

一直在关注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
           });

解决方法

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

确保您输入的字符数超过2个.传递给搜索的功能是阻止少于两个字符的搜索导致搜索：

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?

开头的绑定试图阻止用户在突出显示自动填充候选项时从字段中跳转.使用单值自动完成时,这通常不是问题,因为首先选择菜单项,将其放置在输入中,然后失去焦点.

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

autocomplete有一个autoFocus选项,在这里很有用.当用户在键入后点击标签时,它将确保始终选择候选人.

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