직접 입력란에 자동 완성

Question

내 웹 사이트에 자동 완성 시스템을 추가하고 싶습니다. 잠시 동안 검색했지만 찾고자하는 것을 찾지 못했습니다. 설명하기가 어렵습니다.

직접 내부 입력을 자동 완성하는 시스템을 원합니다. Google은 '일반'자동 완성과이 자동 완성을 사용하지만 아무도 이런 식으로 일하지 않은 것 같습니다.

단순하고 논리적 인 것 ... 그리고 존재하지 않는다면 어떻게 이런 일을 할 수 있습니까?

다음은 구글의 시스템 :

google autocomplete inside input

Answer 1

이 솔루션은 당신에게 현재 텍스트에 대한 첫 번째 자동 완성 옵션 사이의 차이를 보여줍니다, 회색 텍스트 입력 상자 위에 사업부를 넣을 수 있습니다 텍스트 상자

키를 눌렀을 때 - 공통적 인 자동 완성은 일치하는 항목의 목록을 생성합니다. 첫 번째 항목을 선택하고 (.addClass()를 사용하여) 선택한 스타일을 설정하면 텍스트 상자 내용과 첫 번째 항목 내용의 차이를 회색 칸에 넣습니다.

나는 기본적으로 첫 번째 옵션을 선택하는 것이 흥미 확장 발견했습니다

http://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.selectFirst.js

$(el).autocomplete({ 
     selectFirst: true 
}); 

당신은 그것으로 재생할 수 있습니다 및 사용자의 요구에 맞도록 변경. (참고

if (menu.element.children().first().length == 1) 
{ 
    $("#autocomplete").val(menu.element.children().first()[0].childNodes[0].childNodes[0].data); 
} 

와 만 선택할 수 있지만 실제로 텍스트 상자에 삽입되지 않습니다 : 예를 들어, 당신은 'jquery.ui.autocomplete.selectFirst.js'파일에이 코드를 추가 할 수 있습니다 난 그냥 당신이 할 수있는 것에 대한 당신의 모범을 보여주었습니다,이 코드만으로는 충분하지 않을 것입니다).