편집 가능한 선택 상자가 올바른 방법입니까?

Question

사용자가 HTML 기반 웹 응용 프로그램에서 다른 사용자에게 이메일을 보내는 시나리오가 있습니다.

To : 필드의 경우 사용자는 미리 정의 된 전자 메일 목록 중 하나를 선택하거나 미리 정의 된 옵션을 무시하고 전자 메일 목록을 입력 할 수 있습니다.

UI 관점에서이 작업을 수행하는 가장 좋은 방법은 무엇입니까? jQuery를 사용하여 편집 가능한 선택 상자를 살펴 보았지만 아무 것도 입력하지 않아도됩니다.

여기에서 사용할 수있는 다른 UI 메커니즘이 있습니까?

Answer 1

당신은 jQuery를 autocomplete 플러그인 같은 것을 사용하여 시도 할 수 있습니다. 이렇게하면 이메일을 입력 할 수있는 텍스트 상자가 제공 될뿐만 아니라 대신 선택할 수있는 선택 가능한 이메일 주소 세트가 제공됩니다. 플러그인의 설정을 살피면 필드에 포커스가 설정되면 주소 세트가 선택 가능한 목록으로 표시됩니다. 이것은 textbox + select와 비슷한 의미를 지니고 있지만, 인터페이스가 덜 어울려 보입니다.

Answer 2

당신은 혼합 방식으로 갈 수 : Gmail을 수행하거나 내가 다른 웹 메일 시스템을 추측처럼 사용자가 주소를 기록하면서 주소에 대한 제안을 제공 쓰기 가능한 필드.

이렇게하면 사용자에게 자신의 저장된 주소가 표시되지만 새 주소를 쓸 수 있습니다.

Answer 3

내가 이것을하는 방식은 텍스트 입력을 드롭 다운 필터처럼 작동하게 만드는 것입니다. 사용자는 목록에서 항목을 선택하거나 입력을 계속 필터링하고 고유 한 문자열을 만들려면 몇 개의 문자를 입력 할 수 있습니다. 버튼 대신 선택 가능한 목록으로 나타나도록 SELECT에 size 속성 (예 : 6)을 둡니다.

<div> 
    <input id="mySelectInput type="text" onchange="filterSelect()"/><br/> 
    <select id="mySelect" size="6"> 
    <!-- array of options --> 
    </select> 
</div> 

그런 다음 당신의 filterSelect 쓰기() 기능