서버 측 최적화를 위해 $ http를 통해 angular-ui의 자동 완성 기능을 서버와 연결하는 방법은 무엇입니까?
자동 완성 예제 ( http://angular-ui.github.io/bootstrap/#/typeahead )에서는이 자동 완성에 백엔드를 구현하는 것이 쉽다고 언급하지만 예제는 제공하지 않습니다. 특히 어떤 이해 관계 나 내가 보낼 수 있도록 현재 입력 된 문자열을 찾는 것을 서버와 이미 필터링 된 결과를 다시 보내 -이 최적화 서버 측을 내 쿼리를 최소화하고자, 내가 돌아 생각하지 않는다 데이터베이스에 200,000 개가 넘는 항목이있는 앱의 경우 전체 결과 집합을 표시하고 일치하지 않는 항목 만 제외하는 것이 가능합니다.
이 경우 자동 완성 기능을 완전히 잊어 버리고 드롭 다운이있는 사용자 지정 솔루션을 구현해야합니까? 아니면이를 쉽게 수행 할 수있는 방법이 있습니까?
이를 매우 쉽게 구현할 수있는 방법이 있으며, 사용자 지정 솔루션을 롤아웃 할 필요가 없습니다 (적어도이 경우는 아닙니다!). 기본적으로 typeaheads 표현식의 일부로 모든 함수를 사용할 수 있습니다. 예 :
<input type="text" ng-model="selected" typeahead="state for state in getStates($viewValue)">
이 예제에서 볼 수 있듯이 getStates($viewValue)메서드 (범위에 정의 됨)를 호출 할 수 있으며은 $viewValue사용자가 입력 한 값에 해당합니다.
여기서 가장 좋은 점은 함수가 약속을 반환 할 수 있고이 약속이 자동 완성 기능에 의해 올바르게 인식된다는 것입니다.
얼마 전에 자동 완성을 제공하기 위해 서버 측 호출을 사용하는 방법을 보여주는 샘플 플렁크를 작성했습니다. JSONP 서비스에서 실시간으로 도시가 쿼리되는 미국의 모든 도시 (geobytes.com 기반)에 대한 자동 완성을 표시하는이 plunk를 확인하십시오.
http://plnkr.co/edit/t1neIS?p=preview
서버 측에서 필터링을 수행하는 방법에 대한 작업 예제를 확인하십시오 (결과를 보려면 3 자 이상을 입력해야합니다). 물론 jsonp 호출에만 국한되지 않고 promise를 반환하는 모든 메서드를 사용할 수 있습니다.
댓글을 작성할 담당자가 없으므로 답변으로 게시 (죄송합니다!)
최신 버전의 부트 스트랩을 사용하는 경우 자동 완성 기능 앞에 uib-를 추가해야합니다 (예 :
<input type="text" ng-model="selected" uib-typeahead="state for state in getStates($viewValue)">
'IT TIP' 카테고리의 다른 글
| 순수 JavaScript를 사용하여 DOM 요소 값 얻기 (0) | 2020.11.04 |
|---|---|
| 명령 줄에서 Vim 내에서 명령 실행 (0) | 2020.11.04 |
| Robolectric은 API 레벨을 지원합니까? (0) | 2020.11.04 |
| R ggplot2 : stat_count ()는 막대 그래프에서 미적 오류와 함께 사용해서는 안됩니다. (0) | 2020.11.04 |
| console.log (result)는 [object Object]를 반환합니다. (0) | 2020.11.04 |