서버측 최적화를 위해 $http를 통해 angular-ui의 자동 검색을 서버에 연결하려면 어떻게 해야 합니까?
자동 완성 예(http://angular-ui.github.io/bootstrap/#/autoahead)에서는 이 자동 완성 예에 백엔드를 구현하기 쉽다고 언급하고 있지만 예제는 제공하지 않습니다.특히 관심사는 현재 입력된 문자열을 검색하여 서버에 전송하고 이미 필터링된 결과를 반환하는 것입니다.서버측에서 최적화하여 쿼리를 최소화하고 싶습니다.데이터베이스에 200,000개 이상의 엔트리가 있는 앱에서는 결과 세트 전체를 반환하고 일치하지 않는 항목을 제외하는 것은 불가능하다고 생각합니다.
이 경우 자동 검색을 완전히 포기하고 드롭다운을 사용하여 사용자 지정 솔루션을 구현해야 합니까? 아니면 쉽게 구현할 수 있는 방법이 있습니까?
커스텀 솔루션을 롤아웃할 필요 없이 매우 쉽게 구현할 수 있는 방법이 있습니다(적어도 이 경우는 제외).기본적으로 모든 함수를 typeaheads 식의 일부로 사용할 수 있습니다. 예:
<input type="text" ng-model="selected" typeahead="state for state in getStates($viewValue)">
이 예에서 알 수 있듯이getStates($viewValue)메서드(스코프에서 정의)를 호출하여$viewValue는 사용자가 입력한 값에 해당합니다.
여기서 가장 좋은 점은 사용자의 함수가 약속을 반환할 수 있고 이 약속은 자동 검색으로 올바르게 인식된다는 것입니다.
얼마 전에 서버 측 호출을 사용하여 자동 완료를 제공하는 방법을 보여주는 샘플 플랭크를 작성했습니다.JSONP 서비스를 통해 실시간으로 문의되는 미국의 모든 도시(geobytes.com에 기반)에 대해 자동 완료를 표시하는 다음 플랭크에 체크합니다.
http://plnkr.co/edit/t1neIS?p=preview
서버측에서 필터링을 실행하는 방법의 작업 예를 참조해 주세요(결과를 표시하려면 적어도3글자를 입력해야 합니다).물론 jsonp 콜에 한정되지 않습니다.약속을 반환하는 모든 방법을 사용할 수 있습니다.
답변으로 투고(죄송합니다)할 대리인이 없습니다.
부트스트랩의 새로운 버전을 사용하는 경우 자동 검색 앞에 uib-를 추가해야 합니다(이와 같이).
<input type="text" ng-model="selected" uib-typeahead="state for state in getStates($viewValue)">
언급URL : https://stackoverflow.com/questions/15930339/how-to-tie-angular-uis-typeahead-with-a-server-via-http-for-server-side-optimi
'programing' 카테고리의 다른 글
| JSON 개체를 포맷할 때 '{'와 '['의 차이 (0) | 2023.04.05 |
|---|---|
| JQuery를 사용하여 AJAX를 사용하여 Excel 데이터 전송 (0) | 2023.04.05 |
| 스프링 부트에서의 context-param 설정 방법 (0) | 2023.04.05 |
| angularjs는 ng-module로 동작하지 않는 필수 항목을 선택합니다. (0) | 2023.04.05 |
| 관계형 데이터베이스 대신 NoSQL 데이터베이스를 사용해야 하는 경우둘 다 같은 사이트에서 사용해도 될까요? (0) | 2023.04.05 |