自動完成灰色文本

Question

我在我的網站上實施自動完成功能。然而，我不喜歡你如何「點擊」建議才能進入表單字段。

我希望灰色文字顯示出提示搜索詞的其他部分，就像Google一樣。如果用戶點擊標籤，那麼該搜索詞出現，用戶可以進入。

Answer 1

這是我的解決方案。該代碼很快寫入，應僅作爲示例考慮。

HTML：

<div id="inp"> 
    <input type="text" id="search" value="" /> 
    <span id="ending" style="color: gray" ></span> 
</div> 

JS：

$("#search").autocomplete({ 
    source: availableTags, 
    //catch open event 
    open: function(event, ui) { 
     //get first item in opened list 
     var firstInList = $(".ui-autocomplete").children('li').children('a').html(); 
     //find the difference and assign to span 
     $('#ending').html(firstInList.substring(this.value.length)) 
    } 
}); 

$('#search').keypress(function(e){ 
    var keyCode = e.keyCode || e.which; 
    //if Tab 
    if (keyCode == 9) { 
     e.preventDefault(); 
     //get first item in list and assign to input 
     $(this).val($(".ui-autocomplete").children('li').children('a').html()); 
     $(".ui-autocomplete").hide(); 
     $('#ending').empty(); 
    } 
    //input width 
    this.style.width = ((this.value.length + 1) * 6) + 4 + 'px'; 
}); 

DEMO