부트 스트랩 Typeahead 허용 목록 값만 허용

Question

사용자가 Bootstrap Typeahead 항목에 대해 미리 정의 된 데이터 원본 항목으로 사용자의 선택을 제한 할 수 있습니까? 따라서 사용자가 데이터 소스에없는 것을 입력하면 메시지 소스로 알리는 메시지가 표시됩니까? 선행 입력 구성 요소가 포커스를 잃었을 때, 사용자가이 목록에없는 경우 입력이 무효 인 경우 http://cruiseoutlook.com/test

Answer 1

이해하는 경우를 경고한다 :

여기 데모이야?

var myData = [...]; // This array will contain all your possible data for the typeahead 

$("#my-type-ahead").typeahead({source : myData}) 
        .blur(validateSelection); 

function validateSelection() { 
    if(source.indexOf($(this).val()) === -1) 
     alert('Error : element not in list!'); 
} 

그냥 indexOf가 IE6-8에서 구현되지 않는다는 사실에주의 :

코드는 이렇게 이런 일이 될 것입니다. 그러나 shim을 찾을 수 있습니다 (예 : Best way to find if an item is in a JavaScript array?).

Answer 2

jquery와 Samuel의 솔루션을 사용하면 IE 문제를 극복 할 수 있다고 생각합니다. validateSelecion 함수를 다음으로 변경하십시오.

function validateSelection() { 
    if ($.inArray($(this).val(), myData) === -1) 
     alert('Error : element not in list!'); 
} 

나머지는 사무엘이 지적한대로 그대로 둡니다.

Answer 3

동일한 문제가 발생했지만 내 상황은 내 데이터가 모두 입니다. Bloodhound에는 실제로이 작업을 수행 할 수있는 현재 알고있는 바램이 전혀 없지만 Ajax 전체 콜백에 연결하여 유효한 입력 캐시를 수동으로 빌드 한 다음 변경/흐림에 대해 확인할 수 있습니다.

var myData = new Bloodhound({ 
    remote: { 
     url: '/my/path/%QUERY.json', 
     ajax: { 
      complete: function(response){ 
       response.responseJSON.forEach(function (item) { 
        if (myData.valueCache.indexOf(item.value) === -1) { 
         myData.valueCache.push(item.value); 
        } 
       }); 
      } 
     } 
    } 
}); 
myData.valueCache = []; 
myData.initialize(); 

$('#artists .typeahead').typeahead(null, { 
    source: myData.ttAdapter() 
}).bind('change blur', function() { 
    if (myData.valueCache.indexOf($(this).val()) === -1) { 
     $(this).val(''); 
    } 
}); 

Answer 4

는 좀 다르게이 문제를 해결 - 대부분의 시간을 당신이 등 후속 웹 서비스 호출에 게시, 제안 된 옵션의 ID를 캡처해야

내가 밖으로 빈하기로 결정

유형 어 헤드 비동기 호출이 시작될 때 숨겨진 필드, 자동 채우기 또는 선택된 선택지 이벤트의 숨겨진 필드 값을 datum.id로 설정합니다.

양식을 제출할 때 숨겨진 필드에 값이 있는지 여부 만 확인하고 그렇지 않은 경우 사용자는 제안 된 옵션을 선택하지 않은 것입니다.

본인은 선행 입력 필드의 이름을 기반으로 그것에 _id를 추가하여 숨겨진 필드 이름, 다음 추가하여 내가 그 기능 지정된 이것을 onAutocompleted 코드 및 onSelected 기능

을 사용 :

.on('typeahead:selected', onAutocompleted) 
.on('typeahead:autocompleted', onSelected) 

을 입력 필드에 .typeahead 기능을 추가하는 코드에

var n = $(this).attr('name')+'_id'; 
$('input[name="' + n + '"]').val(datum.id); 

선행 입력 문서 거기에 자동 완성 및 선택 기능, 이벤트, 데이텀, 그리고 이름에 전달되는 세 개의 매개 변수 인에 대해 이야기하지만, 내가 이름을 본 적이 통과되고, 내가 사용하는 이유입니다 $ (this) .attr ('name') 메커니즘을 사용하여 필드의 이름을 가져옵니다.