.tagsinput()이 입력 선행 소스 함수에 적용되는 객체의 참조를 전달하려면 어떻게해야합니까?

Question

bootstrap-tagsinput 및 typeahead.js를 사용하여 사용자가 사용 가능한 태그 모음을 하나 이상 선택할 수있는 태그 기반 입력 메커니즘을 제공합니다. 이 태그는 서버 측 모델 바인더가 쉼표로 구분 된 목록에서보기를 좋아하는 서버 측 플래그 열거 형에서 가능한 값과 일치합니다 (태그 세트를 완벽하게 만듭니다).

이 대화 상자에는 많은 수의 입력이 있습니다. 각 입력에는 다양한 태그 (일반적으로 각각 4 개 또는 5 개)가 있습니다. 내가 할 수 있기를 원하는 것은 각 입력을 읽을 수있는 가능한 태그 값의 쉼표로 구분 된 목록을 포함하는 속성으로 채 웁니다.

이

는 하나의 입력을 작동 자바 스크립트의 덩어리의 예는 다음과 같습니다

$('#ExampleInput').tagsinput({ 
    allowDuplicates: false, 
    freeInput: false, 
    typeaheadjs: [ 
     { 
      hint: true, 
      highlight: true, 
      minLength: 0 
     }, { 
      source: function (query, syncResults) { 
       // an array that will be populated with substring matches 
       var matches = []; 

       // regex used to determine if a string contains the substring `q` 
       var substrRegex = new RegExp(query, 'i'); 

       // iterate through the pool of strings and for any string that 
       // contains the substring `q`, add it to the `matches` array 
       $.each($('#ExampleInput').attr('data-values').split(','), function(i, str) { 
        if (substrRegex.test(str)) { 
         matches.push(str); 
        } 
       }); 

       syncResults(matches); 
      } 
     } 
    ] 
}); 

그리고 이것은 입력이 어떻게 생겼는지의 예입니다 일부 관련이없는 데이터 유효성 검사 (등이 명확하게하기 위해 제거)

<input class="form-control text-box single-line" data-values="Tag1,Tag2,Tag3,Tag4" id="ExampleInput" name="ExampleInput" type="text" value="Tag1, Tag2, Tag3, Tag4" /> 

당신이 볼 수 있듯이, 선행 입력 비트는 # ExampleInput의 데이터 값을 사용할 수 태그 목록을 뽑아 속성 참조 피드 소스 기능. 이 모든 것은 제가 원했던 것과 똑같습니다.

내가 가진 문제는 각 입력에 대해 개별적으로 입력하지 않고 입력 클래스를 대상으로 대규모로이 접근법을 적용 할 수 있기를 바랍니다. 원본 함수가 대상 입력 개체 (#ExampleInput)를 인식하도록하여 소스를 제공하는 입력에 특정한 올바른 특성을 추적 할 수있는 방법을 볼 수 없습니다.

이것이 가능합니까? 아니면 각각의 입력을 정적 인 선행 소스와 짝을 지어야합니까?

Answer 1

이것은 꽤 바보 같은 일이었습니다. 나는이 같은 jQuery 문 안에서 보통 $ (this)를 사용하는 것에 매달렸다. $ (this)는 typeaheadjs 구성 문 범위 내의 문서이므로 작동하지 않습니다.

방금 ​​클래스 선택기 다음에 jQuery $ .each()를 사용하여 끝내고 앞 서체 호출에서 foreach의 할당 된 변수를 사용했습니다. 예를 들어

는 : - 그래서

하는 인 결국

는

var simpleSource = function (strings) { 
    return function (query, syncResults) { 
     var matches = []; 

     var substrRegex = new RegExp(query, 'i'); 

     $.each(strings, function(i, str) { 
      if (substrRegex.test(str)) { 
       matches.push(str); 
      } 
     }); 

     syncResults(matches); 
    } 
} 

$('.target-class').each(function (index, target) { 
    $(target).tagsinput({ 
     allowDuplicates: false, 
     freeInput: false, 
     typeaheadjs: [ 
      { 
       hint: true, 
       highlight: true, 
       minLength: 0 
      }, { 
       source: simpleSource($(target).attr('data-values').split(",")) 
      } 
     ] 
    }); 
}); 

(질문의 버전을 의미 유사한이 버전은 재사용 가능한 기능으로 소스 기능을 추상화) jQuery/JavaScript 101 선입견이나 태그 입력 주위의 결함이 아닙니다. 여기를 볼 일은 없어. 움직여. :-)