자동 완성 회색 텍스트

Question

내 사이트에 자동 완성 기능을 구현하고 있습니다. 그러나 양식 필드로 가져 오기 위해 제안을 "클릭"해야하는 것은 마음에 들지 않습니다.

Google과 마찬가지로 나머지 검색어를 제안하는 회색 텍스트를 표시하고 싶습니다. 사용자가 탭을 치면 해당 검색어가 나타나며 사용자는 enter 키를 누릅니다.

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