링크 버튼을 사용한 자동 완성 드롭다운 - 또는 "AJAX가 거칠어졌습니다"

StackOverflow https://stackoverflow.com/questions/40422

  •  09-06-2019
  •  | 
  •  

문제

좋습니다. 링크 버튼을 선택 항목으로 포함하는 자동 완성 드롭다운을 원합니다.따라서 사용자는 "텍스트 상자"에 커서를 놓고 옵션 목록을 볼 수 있습니다.입력을 시작하여 목록 범위를 좁히거나 목록에 있는 옵션 중 하나를 선택할 수 있습니다.클릭하거나 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에 래핑합니다.어쨌든 그것은 그것을하는 한 가지 방법입니다.

나는 당신이 원하는 것이 무엇인지 완전히 확신하지 못하지만 Ra-Ajax는 자동 완성기 확실히 자체적으로 "컨트롤"을 지원합니다.검색창에서 확인하실 수 있습니다 쌓인 실제로 (오른쪽 상단) 링크를 사용하고 있습니다.그러나 원하는 경우 LinkButton이 될 수도 있습니다.

부인 성명;저는 Ra-Ajax와 함께 일합니다.

제 생각에는 이 작업에 AJAX를 전혀 사용하면 안 됩니다.

이유는 다음과 같습니다.

(1) 초점:선택할 수 있는 모든 옵션이 드롭다운에 표시됩니다.이는 가능한 모든 옵션이 이미 클라이언트에 전송되었음을 의미합니다.

(2) 사용자가 무언가를 입력하면 드롭다운의 항목 수가 일치하도록 필터링됩니다.이는 클라이언트 측에서 쉽게 수행할 수 있습니다.이 시점에서 ajax'y 상태로 서버로 돌아가면 작업 속도가 느려질 뿐입니다.

phpguru.org에는 필요한 '거의 정확히' 컨트롤이 있습니다.

http://www.phpguru.org/static/AutoComplete.html#demo

초점 대신 두 번 클릭하면 드롭다운이 표시된다는 점에서 필요한 것과 약간 다릅니다.수정하기가 상당히 쉬울 것입니다.

이게 도움이 되길 바란다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top