selectize.js의 ID를 양식으로 가져 오기

Question

내 사이트에서 양식을 설정하려고하는데 일부 동적 드롭 다운을 사용하고 싶습니다.

Selectize.js가 좋은 해결책 인 것처럼 보였습니다. 그러나 양식을 게시 할 때 선택한 옵션에서 ID를 가져 오는 방법을 찾는 데 어려움을 겪고 있습니다. 사용자의

으로는 "바나나"를 선택하고 selectize은 물론 createFilter는 그래서는 아무 이동 없습니다 엉망이 그러나 valueField'id'에 변경하는 것입니다 후

확실한 대답을 값으로 2를 반환해야합니다 ..

나는 내가 지금까지 무엇을 가진 jsfiddle을했습니다 : http://jsfiddle.net/imfpa/Lh3anheq/16/

HTML :

<form> 
    <select id="item-type" placeholder="Choose type..."> 
    </select> 
</form> 

자바 스크립트 :

function hasOwnPropertyCaseInsensitive(obj, property) { 
    var props = []; 
    for (var i in obj) if (obj.hasOwnProperty(i)) props.push(i); 
    var prop; 
    while (prop = props.pop()) if (prop.toLowerCase() === property.toLowerCase()) return true; 
    return false; 
} 

var REGEX = '[a-zA-ZæøåÆØÅ][a-zA-ZæøåÆØÅ ]*[a-zA-ZæøåÆØÅ]'; 

$('#item-type').selectize({ 
    persist: true, 
    valueField: 'text', 
    labelField: 'text', 
    searchField: ['text'], 
    options: [ 
     {id: '1', text: 'Apple'}, 
     {id: '2', text: 'Banana'}, 
     {id: '3', text: 'Orange'}, 
     {id: '4', text: 'Cherry'}, 

    ],  

    createFilter: function(input) { 
     var match, regex; 

     regex = new RegExp('^' + REGEX + '$', 'i'); 
     match = input.match(regex); 
     if (match) { 
     console.log(match[0]); 
      return !hasOwnPropertyCaseInsensitive(this.options, match[0]); 
     } 

     return false; 
    }, 
    create: true 
}); 

Answer 1

jsFiddle demo (http://jsfiddle.net/json/Lh3anheq/35/)

자, 위의 의견에 우리의 논의에 따라, 당신은 selectize.js 선택한 항목의 id을 반환하려면, 또한 수 있도록 사용자 고유 한 항목을 만듭니다.

당신은 바로 id에 관한 것입니다. valueField: 'text'을 valueField: 'id'으로 바꾸면됩니다.

이제는 함수 hasOwnPropertyCaseInsensitive에서 의사 결정을 수정해야합니다. 이 함수의 첫 번째 인수는 객체의 객체입니다. 콘솔 출력을 볼 경우, selectize 요소의 this.options를 들어, (valueField 이미 여기 id로 대체) 대략 다음과 같은 구조를 볼 수 있습니다 :

여기

{ 
    idOfItem1: { 
     id: idOfItem1, 
     text: textOfItem1 
    }, 
    idOfItem2: ... 
} 

는 웹 관리자가 console.log(this.options)에 대한 출력한다 무엇 :

그래서 우리는 모든 객체를 반복 할 수 있으며 여전히 필드 text에서 표시 값를 가지고 있고,이 정확히 고유성을 위해 사용자 입력과 비교해야하는 문자열

function hasOwnPropertyCaseInsensitive(options, userValue) { 
    var exists = false; 

    for (var option in options) { 
     if (options.hasOwnProperty(option)) { 
      if (options[option].text.toLowerCase() === userValue.toLowerCase()) { 
       exists = true; 
       break; // break from the loop when the match is found. return true works as well. 
      } 
     } 
    } 

    return exists; 
} 

참고! 사용자가 만든 요소의 id은 표시 값과 같습니다. 나는. 목록에 새 요소를 추가하면 (예 : Test, 그것은 다음과 같이 표시됩니다

{ 
    Test: { 
     id: "Test", 
     text: "Test" 
    } 
} 

가 jsFiddle demo ( http://jsfiddle.net/json/Lh3anheq/35/)를 참조하십시오 내가 뭔가를 놓친 경우 알려 주시기 바랍니다.