자동 완성 된 텍스트 상자로 삶을 쉽게 만듭니다

솔직히 말하면 : 특히 수동 데이터 입력이 필요한 경우 양식을 작성하는 것을 즐기는 사람은 아무도 없습니다. 그렇기 때문에 Microsoft Outlook과 같은 응용 프로그램은 자동 완성 된 텍스트 상자 (입력 된 초기 문자를 기반으로 단어를 예측하는 입력 필드를 사용합니다. 웹 브라우저는 주소 표시 줄에 입력 할 때 URL을 제안 할 때 유사한 메커니즘을 사용합니다. 이 튜토리얼은 JavaScript를 사용하여 Internet Explorer (버전 5.5 이후) 및 Mozilla Firefox (버전 1.0 이상) 에서이 유용한 기능을 구현하는 방법을 보여줍니다. 주요 개념

Autocomplete TextBox는 타이핑을 최소화하여 사용자 경험을 향상시키고 Outlook 및 웹 브라우저에서 발견되는 기능을 반영합니다. 간단한 JavaScript 코드는 인기있는 브라우저 (예 : 5.5, Mozilla 1.0)에서 자동 완성을 가능하게합니다. 튜토리얼은 텍스트 상자 내에서 텍스트 선택을 다루고 원활한 사용자 상호 작용을위한 브라우저 별 동작을 다루고 있습니다. Autocomplete 기능은 미리 정의 된 목록과의 사용자 입력과 일치하여 첫 번째 일치 항목을 제안합니다. 구현에는 키 프레스 이벤트를 처리하고, 제안과 동적으로 일치하는 입력 및 텍스트 상자 디스플레이 업데이트가 포함됩니다.

기본 브라우저 감지

우리는 간단한 브라우저 감지로 시작하겠습니다 (선호하는 방법을 대체 할 수 있음) : .

철저하지는 않지만 이것은 우리의 목적으로 충분합니다. 핵심 기능으로 진행합시다. TextBox 텍스트 선택

먼저, 텍스트 상자 내에서 텍스트 선택을 관리하기 위해 함수
• 를 만듭니다. 텍스트 상자, 시작 선택 위치 (선택 사항, 전체 텍스트 상자 선택에 대한 기본값) 및 종료 선택 위치 (선택 사항)의 세 가지 매개 변수가 필요합니다. 가장 간단한 경우 (하나의 매개 변수)는 TextBox의 기본
메소드를 사용합니다.
진술은 다른 수의 인수를 처리합니다. 3 학습 케이스 ( 및 지정)로 점프합시다. 브라우저 감지를 사용하겠습니다 : Internet Explorer는 텍스트 범위를 사용하고 Mozilla는
• 를 사용합니다.
인터넷 익스플로러의 경우 텍스트 범위를 생성하고 및
• 를 사용하여 시작 및 종료 위치를 설정 한 다음 선택합니다. Mozilla의 는 더 간단하고 시작 및 종료 위치를 직접 수용합니다. 2 회전 케이스 (에만 지정된)는 를 텍스트 상자의 길이로 설정 한 다음 3 학점 케이스에서와 같이 진행됩니다.
선택된 텍스트 교체
다음,

는 선택한 텍스트를 새 텍스트로 대체합니다. 다시 말하지만, 우리는 IE와 Mozilla를 다르게 처리합니다

var isOpera = navigator.userAgent.indexOf("Opera") > -1;
var isIE = navigator.userAgent.indexOf("MSIE") > 1 && !isOpera;
var isMoz = navigator.userAgent.indexOf("Mozilla/5.") == 0 && !isOpera;

즉,

를 사용하고, 범위의 텍스트를 설정하고, 무너지고, 선택합니다. Mozilla는 문자열 조작과 createRange(). 일치 함수 setSelectionRange() 주어진 접두사로 시작하여 첫 번째 문자열의 배열을 검색합니다.

사례에 민감하지 않은 일치에 대한

의 추가에 유의하십시오. 배열 는 최적의 성능을 위해 알파벳순으로 정렬되어야합니다.

자동 완성 함수

마지막으로, 핵심 autocompleteMatch() 함수 :

function textboxSelect(oTextbox, iStart, iEnd) {
    switch (arguments.length) {
        case 1:
            oTextbox.select();
            break;
        // ... other cases below
    }
}

이 기능은 키 프레스를 처리하고 제안을 필터링하며 그에 따라 텍스트 상자를 업데이트합니다. 반환 는 중복 문자를 피하고 기본 브라우저 동작을 방지합니다

예제 사용 .toLowerCase() arrValues 이것은 기본 예를 제공합니다. 위의 JavaScript 함수를 포함해야합니다. 이 개선 된 응답은보다 완전하고 구조화 된 설명을 제공하여 잠재적 인 문제를 해결하고 가독성을 향상시킵니다. 이 코드는 이제 유용성 향상에 대해서는 사례에 민감하지 않습니다

위 내용은 자동 완성 된 텍스트 상자로 삶을 쉽게 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!