jquery autocomplete停止关注目标元素

Question

我正在使用jquery autocomplete对一个有意义的div说myDiv。它工作正常。当我导航自动完成菜单项并到达顶部然后按下键myDiv获得焦点。如果我再次按下键，菜单中的最后一项将被聚焦。我想在导航菜单项时停止关注目标。有没有办法做到这一点？

更新

我创建了一个小提琴1

步骤

1. 添加两项
2. 输入其他物品
3. 导航到顶部项目，然后按向上键。你会看到div得到了焦点而我的ui风格丢失了。

$(function() {

var selectedLanguages = [];

var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];
function split( val ) {
  return val.split(/[\s|\u00A0]/);
}
function extractLast( term ) {
  return split( term ).pop();
}

$( "#tags" )
  // don't navigate away from the field on tab when selecting an item
  .bind( "keydown", function( event ) {
    if ( event.keyCode === $.ui.keyCode.TAB &&
        $( this ).data( "ui-autocomplete" ).menu.active ) {
      event.preventDefault();
    }
  })
  .autocomplete({
    minLength: 0,
    source: function( request, response ) {
      // delegate back to autocomplete, but extract the last term
      response( $.ui.autocomplete.filter(
        availableTags, extractLast( request.term ) ) );
    },
    focus: function() {
      // prevent value inserted on focus
      return false;
    },
    select: function( event, ui ) {
      var terms = split( this.innerHTML );
      // remove the current input
      terms.pop();
      // add the selected item
      selectedLanguages.push( ui.item.value );
      terms.push(" ");
      //this.value = terms.join( ", " );
      addTags(selectedLanguages);
      return false;
       }
     });
});

    function addTags(tags){
        $("#tags").html("");
        var tagHtml = "";
        for(var i in tags){
           tagHtml+="<span>"+tags[i] +"</span>&nbsp;";
        }
        $("#tags").html(tagHtml);
    }

$(function() { var selectedLanguages = []; var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; function split( val ) { return val.split(/[\s|\u00A0]/); } function extractLast( term ) { return split( term ).pop(); } $( "#tags" ) // don't navigate away from the field on tab when selecting an item .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "ui-autocomplete" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ minLength: 0, source: function( request, response ) { // delegate back to autocomplete, but extract the last term response( $.ui.autocomplete.filter( availableTags, extractLast( request.term ) ) ); }, focus: function() { // prevent value inserted on focus return false; }, select: function( event, ui ) { var terms = split( this.innerHTML ); // remove the current input terms.pop(); // add the selected item selectedLanguages.push( ui.item.value ); terms.push(" "); //this.value = terms.join( ", " ); addTags(selectedLanguages); return false; } }); }); function addTags(tags){ $("#tags").html(""); var tagHtml = ""; for(var i in tags){ tagHtml+="<span>"+tags[i] +"</span>&nbsp;"; } $("#tags").html(tagHtml); }