트위터 부트 스트랩 자동 완성 드롭 다운 / Knockoutjs를 사용한 콤보 박스


114

부트 스트랩 자동 완성 드롭 다운을 사용해야하는 요구 사항이 있지만 원하는 경우 해당 드롭 다운에 자유 형식 텍스트를 사용할 수 있습니다. TypeAhead에 대해 생각하기 전에 Bootstrap TypeAhead 텍스트 상자를 사용할 수 있지만 사용자가 무엇을 검색해야하는지 모르는 경우를 대비하여 몇 가지 기본값을 헤드 스타트 ​​옵션으로 제공하고 싶기 때문에 드롭 다운이 필요합니다.

MVC DropDownListFor와 함께 사용하여 선택 컨트롤을 만듭니다.

이 기사를 찾았습니다.

https://github.com/danielfarrell/bootstrap-combobox/pull/20

내가해야 할 일은 선택 컨트롤에서 이름을 떼어 내고 컨트롤을 사용하여 자유 형식 텍스트를 입력 할 수있게했습니다. 지금까지 모두 좋습니다.

이제 Knockoutjs와 함께 사용하고 있습니다. 내 옵션과 선택한 값을 선택 컨트롤에 바인딩 한 다음 템플릿의 렌더링 된 행에서 (selector) .combobox ()를 호출하여 선택 컨트롤을 부트 스트랩 콤보 박스로 만들고 입력 컨트롤을 추가하고 장면에서 선택 컨트롤을 숨 깁니다. 뒤에.

이제 문제는 그가 값을 서버에 게시하려고 할 때 입력 상자에 입력 한 값이 제어를 선택하도록 지정한 옵션의 유효한 옵션이 아니기 때문에 기본적으로 항상 첫 번째 옵션으로 설정됩니다. 이것은 bootstrap-combobox.js에서 만든 입력 상자가 아닌 선택 컨트롤에서 선택한 값의 바인딩을 설정했기 때문입니다.

내 질문은 선택 컨트롤이 바인딩 된 것과 동일한 속성에 데이터 바인딩 할 입력 상자를 가져 오는 방법입니다.

다른 옵션은 ?? 더 자세한 설명이 필요하거나 질문이 있으면 알려주세요. 제안 해주세요.

감사.


내 상황에 대한 해결책을 찾았습니다. 자동 완성 comobox 대신 TypeAhead 텍스트 상자를 사용했으며 사용자가 컨트롤에 집중하거나 버튼을 누를 때 기본적으로 옵션 드롭 다운을 표시했습니다. 그렇게함으로써 그들은 나의 주요 요구 사항이 무엇인지 찾을 수 있습니다.
Krishna Teja Veeramachaneni

답변:


254

Select2 for Bootstrap을 살펴보십시오 . 필요한 모든 것을 할 수 있어야합니다.

또 다른 좋은 옵션은 Selectize.js 입니다. Bootstrap에 좀 더 기본적으로 느껴집니다.


27
데이터 소스에 아직 포함되지 않은 텍스트 입력을 허용하기 위해 Select2를 어떻게 사용 했습니까?
compcentral

4
@compcentral이 올바르게 언급했듯이 Select2는 옵션 목록에없는 항목을 입력하는 것을 허용하지 않습니다. (자동) 태그 지정 기능을 사용하여이를 시뮬레이션하는 것은 내부에 공백이있는 텍스트를 허용하지 않기 때문에 번거 롭습니다.
Stas Slabko 2013-08-14

2
얼마나 좋은 발견입니까! 더 많은 Bootstrap-esque처럼 보이기 때문에 Selectize를 사용하게되었습니다.
Steven

1
@compcentral과 Stas가 지적한 문제로 인해 selectize.js를 선택했습니다.
Neil Monroe

1
@compcentral 원격 데이터 소스 방법을 사용하지 않는 이유는 무엇입니까?
Clain Dsilva

23

기본 HTML5 데이터 목록이 작동합니까? 깨끗하고 지저분한 타사 코드를 가지고 놀 필요가 없습니다.W3SCHOOL 튜토리얼

MDN 문서는 매우 설득력과 예제를 제공합니다.


3
HTML 5의 주요 문제점 datalist은 DOM 이벤트를 지원하지 않는다는 것입니다. 따라서 값을 선택할 때마다 해당 텍스트 상자에서 탭해야합니다
Pawan

@Pawan 그건 사실이 아닙니다 (더 이상?). 데이터 목록에 연결된 입력은 최소한 변경을 발생시키고 이벤트를 입력합니다. 여기를 보세요. 변경 및 입력 이벤트 모두 콘솔 로그를 발생시킵니다.
Félix Gagnon-Grenier

1
이 모든 해. 대신 간단한의 타사 라이브러리 깨끗한 이미 지원 솔루션 장난이 모든 년 ...
펠릭스 Gagnon의-Grenier의



1

http://www.jqueryscript.net/form/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest.html을 제안 할 수 있습니까? 목록을 제공하는 트위터 게시물 제안처럼 작동합니다. @ 또는 # 태그를 기반으로 한 사용자 또는 주제

여기에서 데모보기 : http://www.jqueryscript.net/demo/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest/

이것에서 당신은 쉽게 @와 #을 원하는대로 변경할 수 있습니다.


당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.