Question

我有以下jQuery函数用于自动填充其中一个输入字段：

  $(function() {
    var url = MyAutocomplete.url + "?action=my_search" 
    $( "#author" ).autocomplete({
      minLength: 2,
      source: url,
      focus: function( event, ui ) {
        $( "#author" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( "#author" ).val( ui.item.label );
        $( "#author-id" ).val( ui.item.value );
        $( "#author-description" ).html( ui.item.desc ); 
        return false;
      }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( '<li>' )
        .append( '<a class="user cf" href="'+ item.value +'"><div class="image">' + item.desc + '</div><div class="rightText"><div class="topPart">' + item.label + '</div></div>' )
        .appendTo( ul );
    };
  });

它工作正常，但它不会立即跟随链接。但是鼠标和键盘点击的行为不同。

点击鼠标：所有<li>项目都会消失，只需离开<div class="image">一秒钟，然后才会调用该链接。

在键盘上点击：它只是用item.label填充输入字段，当预期的操作自然会跟随链接。

我是jQuery的新手，所以非常感谢任何帮助或指导。如果还有其他我应该共享的代码，请询问。

修改

以下是其中一条建议的HTML示例：

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0">
        <li class="ui-menu-item" id="ui-id-11" tabindex="-1">
            <a class="user cf" href="http://example.com/user/123">
                <div class="image">
                     <img alt="username" src="http://example/user123.png" class="avatar avatar-32">
                </div>
                <div class="rightText">
                     <div class="topPart">user description</div>
                </div>
            </a>
         </li>
    </ul>

jQuery自动完成，点击键盘和鼠标点击链接

0 个答案: