어떻게 웹 사이트에 "검색"과 같은 정말 비슷한 것을 만들고 싶어

Question

결과 필터와 고급 입력을 만들 수 http://www.jobs.cz/

은 어떻게해야하나요 :

• 선택 박스 쇼를 입력 한 사용자의 초점 사용자가
• 을 숨길 선택 박스 결과 중 하나를 선택하면
• 사용자 선택 박스
• 에서 입력 및 필터 결과를 입력 할 수 있습니다 사용자 포커스를 다시 입력하면 선택 상자가 다시 열리고 사용자는 다른 옵션을 선택할 수 있습니다 (이전에 추가 한대로 선택하여 이전 항목을 다시 쓰지 않음)
• 입력을 위해 입력을 시작한 경우 이미 선택 한 항목을 필터링해도 여전히 필터링됩니다 (예 : "Administrativa"하지만 그가 Auto라고 입력하면 "Auto - Moto"를 제공합니다. 즉, 이전에 선택한 값은 필터에 사용되어서는 안됩니다.)
• 각 값은 "태그"모드 여야합니다 인라인 블록 및 클래스 있음)

계속하기 전에 나는 전체 코드를 작성하기를 원하기 때문에 시간이 너무 오래 걸릴 것입니다. 코드는 여기에 있지만 대부분 디자인 방법은 없습니다. 이 같은. 나는 여러 가지로 나의 자아를 시작하는데, 만약 내가 옳다고 생각한다면 나는 잘 모릅니다. 그리고 어떻게 이런 것들이 만들어 질 수 있는지에 대한 아이디어가 필요합니다.

내가 그랬어 그래서 :

• 열기/닫기를 선택 박스의 사업부를 :

입력과 같이 보인다 :

<input id="position" placeholder="Position" ng-focus="focus=true" ng-blur="focus=false" ng-model="q"> 

그리고 뭔가

같은3210 개

<div class="inputHelper" ng-show="focus"> 

• 필터 결과 : 그러나 문제는 경우 시작, <input>에 ng-model="q"와

  <li ng-repeat="pos in listCtrl.positions | filter:q as results" ng-click="listCtrl.choosePosition(pos)">{{pos.name}}</li> 
  

  : NG-반복의 각도 documentation 필터를 기반으로

에 의해 정말 쉽게 수행해야합니다 나는 사용자로부터 이전 선택과 같은 모델로 뭔가를 밀어 넣는다. 사용자가 이미 뭔가를 선택하는 경우 필터 처리 방법을 잘 모르겠습니다.

• 핸들 여러 종목 나는 사용자가 이미를 선택하는 경우 배열에 밀어하지 않을 경우 항상 확인 배열을 만들이 위해

.입력에서 객체의

choosePosition: function(position) { 
    if (listCtrl.chosenPosition.indexOf(position) === -1) { 
     listCtrl.chosenPosition.push(position); 
    } 
} 

• 표시 배열은

나는이에 대한 설명서에서 많이 검색하고 문제의이 종류를 구글, 나는 this을 발견 입력에 basicly 디스플레이 배열이 무엇인지 . 나는 아무것도 발견하지 못했다. 그래서이 시점에서 객체 배열을 표시하는 방법과 각 배열 요소를 인라인 블록으로 스타일을 지정하고 클래스를 지정하는 방법을 모릅니다.

요약 :이 종류의 긴 게시물입니다,하지만 난 어떤 미스 이해를 피하기 위해해야 ​​할 모든 것을, 나는 아직도 어딘가에 붙어 여기 일을 보내고 말을하려고

. 그리고 나는 이것을 잘 디자인하는지조차 확신하지 못한다. 만약 내가 일할 수있는 코드의 일부로 나를 도울 수있는 누군가가 아니면 적어도 나에게 이것을 설명하는 방법을 가르쳐 주겠다. 나는 정말로 감사 할 것이다.

Answer 1

프로젝트가 허용한다면, Angular Material's Autocomplete은 꽤 많이 원하는 것을 직접 구현할 수 있습니다.