링크 버튼을 사용한 자동 완성 드롭다운 - 또는 "AJAX가 거칠어졌습니다"
문제
좋습니다. 링크 버튼을 선택 항목으로 포함하는 자동 완성 드롭다운을 원합니다.따라서 사용자는 "텍스트 상자"에 커서를 놓고 옵션 목록을 볼 수 있습니다.입력을 시작하여 목록 범위를 좁히거나 목록에 있는 옵션 중 하나를 선택할 수 있습니다.클릭하거나 Enter 키를 누르자마자 연결된 데이터세트가 선택 항목에 따라 필터링됩니다.
좋아, 드롭다운 주위에 AJAX 자동 완성을 래핑하는 것만큼 쉽나요?아니요?(제발?)
해결책
이 위젯은 세 가지 항목으로 만들 수 있습니다.텍스트 입력, 버튼 입력 및 결과를 보관하는 순서가 지정되지 않은 목록입니다.
__________ _
|__________||v|__ <-- text and button
| | <-- ul (styled to appear relative to text input)
| |
| |
|______________|
ul 표시:
- 텍스트 입력의 'keyUp' 이벤트(값이 비어 있지 않은 경우)
- 버튼 입력의 '클릭' 이벤트(현재 표시되지 않는 경우)
ul이 다음에 숨겨져 있습니다:
- 버튼 입력의 '클릭' 이벤트(현재 표시되는 경우)
- 목록 항목의 '클릭' 이벤트
ul이 표시되거나 텍스트 입력의 'keyUp' 이벤트가 트리거되면 목록을 업데이트하기 위해 서버에 대한 AJAX 호출이 이루어져야 합니다.
성공하면 결과가 ul에 배치되어야 합니다.목록 항목을 생성할 때 텍스트 입력 값을 설정하고 ul을 숨기는 '클릭' 이벤트가 첨부되어 있어야 합니다(이벤트를 첨부하려면 li 내부에 링크를 추가해야 할 수도 있음).
가장 어려운 부분은 실제로 CSS입니다.JavaScript는 특히 여러 브라우저를 지원하는 프로토타입과 같은 견고한 라이브러리를 사용하면 간단합니다.
항목에 대해 일부 ID를 지원하고 싶을 수 있으므로 ID가 있는 각 목록 항목에 숨겨진 입력을 추가하고 텍스트 입력 옆에 선택한 항목 ID를 저장할 수 있습니다.
다른 팁
사용자 선택에 따라 데이터 세트를 다시 바인딩하려면 드롭다운 목록의 OnSelectedIndexChanged 이벤트를 처리해야 합니다.비동기 포스트백에서 필터링이 발생하도록 하려면 데이터 세트(또는 가정하고 있는 DataGrid)와 드롭다운을 UpdatePanel에 래핑합니다.어쨌든 그것은 그것을하는 한 가지 방법입니다.
제 생각에는 이 작업에 AJAX를 전혀 사용하면 안 됩니다.
이유는 다음과 같습니다.
(1) 초점:선택할 수 있는 모든 옵션이 드롭다운에 표시됩니다.이는 가능한 모든 옵션이 이미 클라이언트에 전송되었음을 의미합니다.
(2) 사용자가 무언가를 입력하면 드롭다운의 항목 수가 일치하도록 필터링됩니다.이는 클라이언트 측에서 쉽게 수행할 수 있습니다.이 시점에서 ajax'y 상태로 서버로 돌아가면 작업 속도가 느려질 뿐입니다.
phpguru.org에는 필요한 '거의 정확히' 컨트롤이 있습니다.
http://www.phpguru.org/static/AutoComplete.html#demo
초점 대신 두 번 클릭하면 드롭다운이 표시된다는 점에서 필요한 것과 약간 다릅니다.수정하기가 상당히 쉬울 것입니다.
이게 도움이 되길 바란다.