Knockoutjs와 트위터 부트 스트랩 자동 완성 드롭 다운 / 콤보 박스
부트 스트랩 자동 완성 드롭 다운을 사용해야하는 요구 사항이 있지만 원하는 경우 해당 드롭 다운에 자유 형식의 텍스트를 사용할 수 있습니다. TypeAhead에 대해 생각하기 전에 Bootstrap TypeAhead 텍스트 상자를 사용할 수 있지만 사용자가 무엇을 검색 해야할지 모르는 경우 기본 값을 헤드 스타트 옵션으로 지정하려면 드롭 다운이 필요합니다.
MVC DropDownListFor와 함께 이것을 사용하여 선택 컨트롤을 만듭니다.
나는이 기사를 찾았습니다.
https://github.com/danielfarrell/bootstrap-combobox/pull/20
내가해야 할 일은 select 컨트롤에서 이름을 빼는 것 뿐이며 컨트롤은 자유 형식의 텍스트를 입력 할 수있게했습니다. 지금까지는 모두 좋았습니다.
이제 Knockoutjs와 함께 이것을 사용하고 있습니다. 옵션과 선택한 값을 선택 컨트롤에 바인딩 한 다음 템플릿으로 렌더링 된 행에서 (selector) .combobox ()를 호출하여 선택 컨트롤을 부트 스트랩 콤보 박스로 만들고 입력 컨트롤을 추가하고 장면에서 선택 컨트롤을 숨 깁니다. 뒤에.
입력 상자에 넣은 값이 컨트롤을 선택하기 위해 제공 한 옵션의 올바른 옵션이 아니기 때문에 항상 기본적으로 첫 번째 옵션으로 설정하는 것이므로 문제는 서버에 게시 할 값을 가져 오려고 할 때입니다. 이것은 bootstrap-combobox.js에 의해 생성 된 입력 상자가 아닌 선택 컨트롤에서 선택한 값의 바인딩을 설정했기 때문입니다.
내 질문은 입력 상자를 선택 컨트롤이 바인딩 된 것과 동일한 porperty에 데이터 바인딩하는 방법입니다.
다른 옵션 ?? 더 자세한 설명이 필요하거나 궁금한 점이 있으면 알려주십시오. 제안 해주세요.
감사.
Select2 for Bootstrap을 살펴보십시오 . 필요한 모든 것을 할 수 있어야합니다.
또 다른 좋은 옵션은 Selectize.js 입니다. Bootstrap에 조금 더 고유 한 느낌입니다.
기본 HTML5 데이터 목록이 작동합니까? 깨끗하고 지저분한 타사 코드를 가지고 놀 필요가 없습니다. W3SCHOOL 튜토리얼
MDN 문서는 매우 설득력과 예제를 제공합니다.
Bootstrap 3 기본 플러그인 용 Select2
https://fk.github.io/select2-bootstrap-css/index.html
이 플러그인은 select2 jquery 플러그인을 사용합니다
덩어리
PM> 설치 패키지 Select2-Bootstrap
Fuel UX 콤보 박스 는 모든 기능을 갖추고 있습니다.
http://www.jqueryscript.net/form/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest.html을 제안 할 수 있습니까 , 트위터 게시물 제안과 비슷하게 작동합니다. @ 또는 # 태그를 기반으로하는 사용자 또는 주제
이 중 하나에서 @와 #을 원하는 것으로 쉽게 변경할 수 있습니다.
부트 스트랩 토큰 필드도 좋아 보입니다 : http://sliptree.github.io/bootstrap-tokenfield/
'IT박스' 카테고리의 다른 글
| 디버그 정보를 사용하여 릴리스 빌드를 "full"또는 "pdb-only"로 컴파일해야합니까? (0) | 2020.08.04 |
|---|---|
| sqlite 테이블에서 임의의 행을 선택하십시오. (0) | 2020.08.03 |
| Intellij IDEA에서 텍스트를 새 줄로 바꾸려면 어떻게합니까? (0) | 2020.08.03 |
| build.gradle에 maven 저장소 추가 (0) | 2020.08.03 |
| 인증서를 가져온 후 Java Keytool 오류, "keytool 오류 : java.io.FileNotFoundException & 액세스 거부" (0) | 2020.08.03 |