0

我在内容可编辑的 div 上使用 jquery 自动完成功能，比如 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);
    }

4

0 回答 0