Pytanie Niestandardowe renderowanie Selectize.js ze statycznym html


Używam genialnej biblioteki selectize.js do generowania atrakcyjnego pola wyboru z grupami opcji. Wszystko działa, ale utknąłem w punkcie, w którym nie mogę użyć niestandardowego renderera na stronie przykładów (kontakty e-mail) http://brianreavis.github.io/selectize.js/ ponieważ "element" nie zna atrybutu "e-mail". Wiem, jak to zrobić w javascript, ale jak zdefiniować dwa atrybuty w statycznym html?

W js to by było

$('#id').selectize({
  ...
  options: [
    { name: "Martin", email: "martin@asdf.at" }
  ],
  ....
}

Próbowałem następujące:

<select>
  <option value="Martin|martin@asdf.at" data-name="Martin" data-email="martin@asdf.at">
    Martin
  </option>
</select>

Ale to nie działa ... Wreszcie funkcja renderowania wzięta z przykładów:

render: {
    item: function(item, escape) {
        return '<div>' +
            (item.name ? '<span class="name">' + escape(item.name) + '</span>' : '') +
            (item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') +
        '</div>';
    },
    option: function(item, escape) {
        var label = item.name || item.email;
        var caption = item.name ? item.email : null;
        return '<div>' +
            '<span class="label">' + escape(label) + '</span>' +
            (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
        '</div>';
    }
}

Byłbym wdzięczny za wszelkie wskazówki!

Pozdrowienia, Jaskółka oknówka


11
2018-04-21 21:45


pochodzenie


Czy rozwiązałeś ten problem? Właściwie chcę wyświetlać niestandardowe elementy, ale nie chcę używać ajaxa do pobierania danych. Po prostu chcę to zrobić za pomocą statycznego HTML - Victor
Cześć. Rozwiązałeś to? Jestem tego samego statku. - wviana


Odpowiedzi:


Użyj tego przykładu:

var clearhack = $('.selectized').selectize({
    valueField: 'id',
    labelField: 'name',
    searchField: ['name'],
    sortField: 'score',//this is set to 'name' on my version, but seems sortField is only used together with load-function and score-function
    sortDirection: 'desc',
    maxItems: 1,
    //only using options-value in jsfiddle - real world it's using the load-function
    options: [
        {"id":861,"name":"Jennifer","score":6},
        {"id":111,"name":"Jenny","score":6},
        {"id":394,"name":"Jorge","score":6},
        {"id":1065,"name":"Jorge Carlson","score":6},
        {"id":389,"name":"Ann Jennifer","score":3},
        {"id":859,"name":"Bobby Jenkins","score":3},
        {"id":264,"name":"Peter Jenkins","score":3},
        {"id":990,"name":"Fred","score":1},
        {"id":349,"name":"Kal","score":1},
        {"id":409,"name":"Louis","score":1}
    ],
    create: false,
    render: {
        option: function(item, escape) {
            return '<div>'
            + '<span>ID:'+item.id+'</span> '
            + '<span>Name:'+item.name+'</span> '
            + '<span>DEBUG:'+item.score+'</span>'
            + '</div>';
        }
    },
    score: function(search) {
        return function(item) {
            return parseInt(item.score);
        };
    }
});

8
2017-09-13 11:43



To nie odpowiada na pytanie - Sloganho


Nie jestem pewien, czy to pomoże, ponieważ jest super późno - ale użyłem następującej metody, aby uzyskać napisy pod moimi wybranymi opcjami:

Opcje html takie jak:

<option data-data='<?php echo json_encode($obj, JSON_FORCE_OBJECT) ?>' value="<?php echo $obj->id ?>"><?php echo $obj->name ?></option>

a następnie wybierz kod:

$('select#my-select').selectize({
  valueField: 'id',
  labelField: 'name',
  searchField: ['name'],
  render: {
    option: function(item, escape) {
      var label = item.name;
      var caption = item.description;
      return '<div>' +
      '<span style="display: block; color: black; font-size: 14px;">' + escape(label) + '</span>' +
      (caption ? '<span style="display: block; color: gray; font-size: 12px;">' + escape(caption) + '</span>' : '') +
      '</div>';
    }
  }
});

Nie czytałem wielu dokumentów, ale to zadziała dla $ obj, takich jak:

{ 'id': '1', 'name': 'fred', 'description': 'fred person'}

Po prostu dodaj więcej atrybutów i odwołaj je w funkcji opcji wyświetlania.

Wydaje się, że wybieram reads json z atrybutu data-data, aby wypełnić te, ale uważam, że możesz zmienić atrybut, który odczytuje json z dataAttr opcja w inicjalizacji.


1
2018-03-13 15:16



Ale jak znaleźć atrybuty znaczników opcji wewnątrz renderowania? - wviana


Kilka minut temu miałem ten sam problem. Dodałem trochę kodu selectize.js

W działaniu init_select i dalej addOption po domyślnym kodzie dodałem:

    /// iterate on data attr on <option>
    $.each($option.data(), function(i, v) {
       option[i] = v;
    });

Wklej ten kod poniżej oryginalnych linii:

var option             = readData($option) || {};
option[field_label]    = option[field_label] || $option.text();
option[field_value]    = option[field_value] || value;
option[field_optgroup] = option[field_optgroup] || group;

Po tym moja metoda renderowania w selekcji działa dobrze z statycznymi atrybutami danych :)


0
2018-04-21 13:47



to wydaje się być inteligentnym podejściem do rozwiązania często dyskutowanego problemu Selectize ... myślę, że możesz nieco rozwinąć to rozwiązanie? - Jeff Solomon
@JeffSolomon co masz na myśli? :) Masz na myśli rozszerzenie selektowania? To stara odpowiedź, może problem zostanie rozwiązany natychmiast po wyjęciu z pudełka - robertw