Получить ID от selectize.js к форме

Question

Я пытаюсь настроить форму на своем сайте и хочу использовать динамическое раскрывающееся меню.

Я нашел Selectize.js, который кажется хорошим решением, однако я изо всех сил пытаюсь выяснить, как получить идентификаторы из выбранного варианта, когда я отправляю форму.

Как и пользователь выбирает «банан» и selectize должен возвращать 2 в качестве значения для пост

Очевидный ответ, конечно, будет меняться valueField к 'id' однако, что портит createFilter так, что нет не идти ..

Я сделал jsfiddle с тем, что я до сих пор: http://jsfiddle.net/imfpa/Lh3anheq/16/

HTML:

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

JavaScript:

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. Первый аргумент в этой функции - объект объектов. Если вы видите выход консоли, для this.options вашего selectize элемента, вы увидите примерно следующую структуру (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/) и дайте мне знать, если я что-то пропустил.