입력입력창 자동 매칭(네이티브코드)_javascript 스킬

오늘 그룹의 누군가가 Renren.com에 몇 가지 인터뷰 질문을 게시했습니다. 이전에 그 중 일부를 다시 게시했기 때문에 수행할 질문을 선택하고 기술을 연습했습니다.

이 질문의 요구 사항은 다음과 같습니다:
1. 네이티브 코드를 사용하여 구현하며, 프레임워크를 사용할 수 없습니다.
2. 입력란 아래에 메뉴 형태로 표시됩니다.
3. 영어 문자만 일치하며, 메뉴에서 일치하는 내용이 굵게 표시됩니다.
4. 키보드의 위쪽 및 아래쪽 화살표를 통해 선택하고 Enter 키를 누른 다음 선택한 내용을 입력 상자에 씁니다.
Idea
입력 변경 사항을 캡처하고 사용자가 입력한 값을 사용합니다. (이하 입력값이라 함)을 목록 항목과 일치시키려면, 여기서는 목록 항목이 쿼리에 의해 반환된 배열(이하 목록이라고 함)이라고 가정합니다. 일치 방법은 입력값을 목록 항목으로 사용하는 것입니다. 각 목록 값과 일치하도록 시작 값을 지정하고, 필터링 조건에 맞는 항목을 페이지에 출력합니다.
분석
세 번째 요구사항의 키워드는 굵게 표시되어 있습니다. 여기서 정규식으로 바꾸시면 됩니다.
네 번째 항목은 더 많은 키워드가 필요합니다. 한 문장에 살인 의도가 많이 숨겨져 있습니다. 이 부분은 주로 키보드에 대한 것입니다. 그런 다음 Enter 키를 누르고 입력 상자에 씁니다.

이 시점에서 끝났다고 생각하면 너무 성급한 것입니다. 숨겨진 욕구가 4개 이상 있습니다.
•기본적으로 첫 번째 항목이 강조 표시되며, 상하 키를 누르면 현재 항목이 강조 표시됩니다.
•Enter를 누르면 첫 번째 항목이 기본적으로 선택됩니다.
•현재 항목 위로 마우스를 가져가면 강조 표시됩니다.
•선택한 항목 클릭을 지원합니다.
혹시 빠진 부분이 있을 수도 있으니 여기서는 걱정하지 않겠습니다.
연습
JS 문제이지만 먼저 페이지 구조를 작성해야 합니다.

코드 복사 코드는 다음과 같습니다.

>< ul id="output">

점유 장소

점유 구덩이 / div>

프레임이 허용되지 않으므로 다음은 몇 가지 가능한 방법을 간단히 요약한 것입니다.
먼저 캡슐화 개체를 만들고 이름을 dom으로 지정한 다음 재사용을 위해 모든 기본 메서드를 이 개체에 넣습니다.

코드 복사

코드는 다음과 같습니다. var dom = { $ : function( id ){ return document.getElementById(id);

},

tag : function( tagName,root ){
root = root ? root : document; makeArray( root .getElementsByTagName(tagName) );
},
bind : function( element,type,handler ){
if( document.addEventListener ){
element.addEventListener( type,handler, false );
}else if( document.attachEvent ){
element.attachEvent( 'on' type,handler )
},
removeClass : 함수( 목록, 이름) ){
var el = list[i],
r = new RegExp('\s*\b' 이름 '\b\s*','g');
for( var i = 0 , len = list.length ; i < len ; i ){
var cur = list[i]
if( r.test( cur.className ) ){
cur.className .className.replace(r,'');
};
},
height: function( element ){
return element.offsetHeight; 🎜>getBound : function( element ){
return element.getBoundingClientRect();
},
getText : function( element ){
return element.textContent : element.innerText;
},
trim : function( string ){
return string.replace( /^s*(.*)s*$/,'$1' )
},
makeArray : function( tagList ){
for( var i = 0 , arr = [] , len = tagList.length ; i < len ; i ){
arr.push( tagList[i] ); >};
return arr;
},
isVisible: function( element ){
return element.style.display == 'block'
}
>

그런 다음 특정 처리 로직을 저장할 객체를 생성합니다. 작성자의 영어 실력이 좋지 않으므로 autoMatch라고 부르겠습니다.
이 개체는 할 일이 많습니다:
•메뉴 위치 결정
•실시간으로 사용자 입력 처리
•마우스 및 키보드 키 입력 처리
메뉴 캡슐화된 객체 dom의 getBound 메소드를 사용하여 경계 객체를 반환합니다. 이 객체에는 left와 top의 두 가지 속성이 있습니다. 익숙해 보일 수 있으며 jQuery의 offset() 메서드와 유사합니다.
여기서 사용자 입력 처리에 대해 언급할 가치가 있습니다. 실시간 처리이기 때문에 onchange 이벤트 사용을 고려하기 시작했지만 포커스를 잃었을 때만 트리거되므로 무리입니다.
이때 제 눈은 그 일을 충분히 할 수 있는 oninput에 쏠렸습니다.

코드 복사 코드는 다음과 같습니다.

dom.bind( obj.input,' input' , this.inputProcess );

그런데 IE는 또 색다른 행동을 했습니다. 입력 입력을 지원하지 않습니다.
기쁨은 모두 헛된 것입니다!
모든 일에는 언제나 전환점이 있습니다. 구석에 있는 onpropertychange가 서서히 우리에게 다가오고 있습니다... 이는 oninput과 매우 유사하며 동일한 특성을 가지고 있습니다. 적어도 입력 입력 캡처 측면에서는 이것이 바로 제가 IE를 처리하는 데 사용합니다. 그리고 우리 모두는 그것을 사용하는 데 동의합니다.
다시 바인딩:

코드 복사 코드는 다음과 같습니다.

dom.bind ( obj.input,'propertychange' , this.inputProcess );

다음 단계는 위, 아래, Enter 키입니다. 해당 키 코드는 각각 38, 40, 13입니다. 주의할 점은 FF와 IE의 속성 이름이 다르다는 것입니다.
자세한 구현 세부정보는 데모를 참조하세요.
데모를 보려면 저를 클릭하세요
실제 비즈니스 시나리오에서는 사용자 입력에 대해 실시간 Ajax 쿼리가 수행될 수 있습니다. 문자를 입력할 때마다 쿼리가 발생합니다.
그러나 Ajax 요청을 너무 자주 보내는 것은 비용 효율적이지 않으며 응답 속도도 그러한 구현을 허용하지 않습니다.
내 생각은 사용자가 첫 번째 문자(요청 데이터 수는 일반적으로 제한되어 있으며 일반적으로 10개)를 입력하면 요청을 보내고 반환 값(이하 캐시라고 함)을 저장하는 것입니다.
캐시에서 첫 번째 문자를 필터링한 후의 사용자 입력은 문자를 입력할 때마다 정확도가 높아지고 캐시는 점점 작아집니다.
사용자가 삭제하고 다시 입력하면 위 단계를 반복합니다.
물론, 좀 더 복잡한 비즈니스 시나리오가 있을 가능성도 배제할 수 없습니다. 예를 들어, 매칭이 충분할 경우 사용자가 각 입력에 대해 10개의 데이터 옵션을 갖도록 해야 하며, 이에 따라 더 많은 판단이 필요합니다. 그리고 요청합니다.
따라서 구체적인 구현은 실제 비즈니스 시나리오에 따라 달라집니다.
이 글의 끝입니다. 읽어주셔서 감사드리며, 실제적인 의견도 환영합니다.