0.11.1事先鍵入的內容在鼠標和鍵盤衝突時查看下拉搜索結果

Question

我已經實現了Twitter的Typeahead.js功能用於顯示搜索結果的建議，它工作正常，但問題是當我使用鍵盤來突出顯示建議，然後移動光標在不同的建議。下面是一些圖片說明問題：

我如何刪除鍵盤選擇當鼠標光標懸停在另一種選擇，也當鼠標已經徘徊在一個建議，如果我按下鍵盤上的/下，鼠標選擇消失，選擇分別向上/向下移動？

HTML/JavaScript的/ JQuery的/ AJAX

<div class="col-sm-8"> 
    <form class="navbar-form" role="search" action="/search" method="get"> 
     <div class="input-group search-bar-nav"> 
      <input type="text" class="typeahead form-control" data-provide="typeahead" placeholder="Buscar trabajos" name="key" id="search-input" autocomplete="off"> 
      <span class="input-group-btn search-button"> 
       <button type="submit" class="btn btn-default"> 
        <span class="fa fa-search"></span> 
       </button> 
      </span> 
     </div> 
    </form> 
</div> 

<script type="text/javascript"> 
$(function(){ 
    var jobs = []; 

    var throttledRequest = _.debounce(function (query, syncResults, asyncResults){ 
     var url = 'quicksearch?key=' + query; 
     $.ajax({ 
      url: url, 
      cache: true, 
      success: function (data){ 
       var jobs = []; 

       _.each(data, function (item, ix, list){ 
        jobs.push(item); 
       }); 

       asyncResults(jobs); 
      } 
     }); 
    }, 300); 

    $('#search-input').typeahead({ highlight: true }, { 
     source: function (query, syncResults, asyncResults){ 
      throttledRequest(query, syncResults, asyncResults); 
     }, 
     display: 'title', 
     templates: { 
      suggestion: function (data){ 
       var result = '<div class="tt-job-result">' 
          + '<div class="tt-job-title">' + data.title + '</div>' 
          + '<div class="tt-job-company">' + data.companyName + '</div>' 
          + '</div>'; 
       return result; 
      } 
     }, 
     name: 'results', 
     limit: 10, 

    }); 
    $(".tt-hint").addClass("form-control"); 
    $('.tt-hint').width($('#search-input').parent().outerWidth() + 39); 
    $('#search-input').width($('#search-input').parent().outerWidth() + 39); 
}); 
</script> 

CSS

.has-warning .twitter-typeahead .tt-input, 
.has-warning .twitter-typeahead .tt-hint { 
    border-color: #8a6d3b; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
} 
.has-warning .twitter-typeahead .tt-input:focus, 
.has-warning .twitter-typeahead .tt-hint:focus { 
    border-color: #66512c; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; 
} 
.has-error .twitter-typeahead .tt-input, 
.has-error .twitter-typeahead .tt-hint { 
    border-color: #a94442; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
} 
.has-error .twitter-typeahead .tt-input:focus, 
.has-error .twitter-typeahead .tt-hint:focus { 
    border-color: #843534; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; 
} 
.has-success .twitter-typeahead .tt-input, 
.has-success .twitter-typeahead .tt-hint { 
    border-color: #3c763d; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
} 
.has-success .twitter-typeahead .tt-input:focus, 
.has-success .twitter-typeahead .tt-hint:focus { 
    border-color: #2b542c; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; 
} 
.input-group .twitter-typeahead:first-child .tt-input, 
.input-group .twitter-typeahead:first-child .tt-hint { 
    border-bottom-left-radius: 4px; 
    border-top-left-radius: 4px; 
} 
.input-group .twitter-typeahead:last-child .tt-input, 
.input-group .twitter-typeahead:last-child .tt-hint { 
    border-bottom-right-radius: 4px; 
    border-top-right-radius: 4px; 
} 
.input-group.input-group-sm .twitter-typeahead .tt-input, 
.input-group.input-group-sm .twitter-typeahead .tt-hint { 
    height: 30px; 
    padding: 5px 10px; 
    font-size: 12px; 
    line-height: 1.5; 
    border-radius: 3px; 
} 
select.input-group.input-group-sm .twitter-typeahead .tt-input, 
select.input-group.input-group-sm .twitter-typeahead .tt-hint { 
    height: 30px; 
    line-height: 30px; 
} 
textarea.input-group.input-group-sm .twitter-typeahead .tt-input, 
textarea.input-group.input-group-sm .twitter-typeahead .tt-hint, 
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input, 
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint { 
    height: auto; 
} 
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, 
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint { 
    border-radius: 0; 
} 
.input-group.input-group-sm .twitter-typeahead:first-child .tt-input, 
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint { 
    border-bottom-left-radius: 3px; 
    border-top-left-radius: 3px; 
    border-bottom-right-radius: 0; 
    border-top-right-radius: 0; 
} 
.input-group.input-group-sm .twitter-typeahead:last-child .tt-input, 
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint { 
    border-bottom-left-radius: 0; 
    border-top-left-radius: 0; 
    border-bottom-right-radius: 3px; 
    border-top-right-radius: 3px; 
} 
.input-group.input-group-lg .twitter-typeahead .tt-input, 
.input-group.input-group-lg .twitter-typeahead .tt-hint { 
    height: 46px; 
    padding: 10px 16px; 
    font-size: 18px; 
    line-height: 1.33; 
    border-radius: 6px; 
} 
select.input-group.input-group-lg .twitter-typeahead .tt-input, 
select.input-group.input-group-lg .twitter-typeahead .tt-hint { 
    height: 46px; 
    line-height: 46px; 
} 
textarea.input-group.input-group-lg .twitter-typeahead .tt-input, 
textarea.input-group.input-group-lg .twitter-typeahead .tt-hint, 
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input, 
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint { 
    height: auto; 
} 
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, 
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint { 
    border-radius: 0; 
} 
.input-group.input-group-lg .twitter-typeahead:first-child .tt-input, 
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint { 
    border-bottom-left-radius: 6px; 
    border-top-left-radius: 6px; 
    border-bottom-right-radius: 0; 
    border-top-right-radius: 0; 
} 
.input-group.input-group-lg .twitter-typeahead:last-child .tt-input, 
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint { 
    border-bottom-left-radius: 0; 
    border-top-left-radius: 0; 
    border-bottom-right-radius: 6px; 
    border-top-right-radius: 6px; 
} 
.twitter-typeahead { 
    width: 100%; 
} 
.input-group .twitter-typeahead { 
    display: table-cell !important; 
    float: left; 
} 
.twitter-typeahead .tt-hint { 
    color: #999999; 
} 
.twitter-typeahead .tt-input { 
    z-index: 2; 
} 
.twitter-typeahead .tt-input[disabled], 
.twitter-typeahead .tt-input[readonly], 
fieldset[disabled] .twitter-typeahead .tt-input { 
    cursor: not-allowed; 
    background-color: #eeeeee !important; 
} 
.tt-menu { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 1000; 
    min-width: 160px; 
    width: 100%; 
    padding: 5px 0; 
    margin: 2px 0 0; 
    list-style: none; 
    font-size: 14px; 
    background-color: #ffffff; 
    border: 1px solid #cccccc; 
    border: 1px solid rgba(0, 0, 0, 0.15); 
    border-radius: 4px; 
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); 
    background-clip: padding-box; 
    *border-right-width: 2px; 
    *border-bottom-width: 2px; 
} 
.tt-menu .tt-suggestion { 
    display: block; 
    padding: 3px 20px; 
    clear: both; 
    font-weight: normal; 
    line-height: 1.42857143; 
    color: #333333; 
    white-space: nowrap; 
} 
.tt-menu .tt-suggestion.tt-cursor { 
    text-decoration: none; 
    outline: 0; 
    background-color: #f5f5f5; 
    color: #262626; 
} 
.tt-menu .tt-suggestion.tt-cursor a { 
    color: #262626; 
} 
.tt-menu .tt-suggestion p { 
    margin: 0; 
} 

.tt-menu .tt-suggestion:hover { 
    text-decoration: none; 
    outline: 0; 
    background-color: #f5f5f5; 
    color: #262626; 
} 

.tt-menu .tt-suggestion:hover a { 
    color: #262626; 
} 

.tt-job-title { 
    font-size: 16px; 
    font-weight: bold; 
} 

.tt-job-result { 
    padding: 3px; 
    height: 45px; 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 

.tt-job-company { 
    font-size: 12px; 
    font-weight: normal; 
} 

順便說一句，我使用引導3（這是不符合事先鍵入的內容v0.11.1兼容）長，因此CSS。

Answer 1

添加

$('.twitter-typeahead').on('mouseover', '.tt-suggestion', function(event){ 
     $('.tt-tag').removeClass('tt-cursor'); 
     $(this).addClass('tt-tag-hover'); 
    }); 

    $('.twitter-typeahead').bind('typeahead:cursorchange', function (ev, suggestion){ 
     $('.tt-tag').removeClass('tt-tag-hover'); 
    }); 

到你的腳本，並添加下面的類的CSS，同時去除.tt-menu tt-suggestion:hover類

.tt-tag-hover:hover { 
    text-decoration: none; 
    outline: 0; 
    background-color: #f5f5f5; 
    color: #262626; 
}