So ändern Sie Platzhalter von selectize.js dropdown?

Möchte ich ändern Platzhalter für ein dropdown erstellt selectize.js wenn die übergeordnete dropdown ändert seine Auswahl zu laden, die Optionen des dropdown-deren Platzhalter verändert werden. Es gibt keine Methode, dies zu tun in der Dokumentation.

Die Frage ist unklar. Was haben Sie versucht? Irgendwelche code-Schnipsel? Wie sind Sie mit der Aktualisierung Optionen?

InformationsquelleAutor freezer | 2013-10-02

Nicht sicher, ob selectize ändert sich ständig, Ihren code oder wenn alle anderen auf diesem thread nur whiffed aber all diese Antworten scheinen falsch zu sein, individuell, aber wenn Sie die Art von kombinieren Sie die richtigen Teile aus jeder Antwort, die Sie wind-up mit dieser, die funktioniert für mich.

        var textHandler = function(name) {
        return function() {
            if(name == 'focus'){                    
                jQuery("select#myid + .selectize-control").find("input:text").prop({"placeholder": ""});
            }
        };
    };
    jQuery('#sf159_textsearchtextsearch').selectize({
        closeAfterSelect: true,
        hideSelected    : true,
        createOnBlur    : true,
        openOnFocus     : true,
        maxOptions      : 10,
        persist         : true,
        placeholder     : "Neighborhood, Street, School, Zip, MLS",
        plugins         : ['remove_button'],
        valueField      : 'id',
        labelField      : 'text',
        searchField     : 'value',
        options         : [],
        create          : false,
        render          : {
            option: function (item, escape) {
                //console.log(item);
                var address = '';
                var keyword = '';
                var tx = item.text.split(',');
                for (var i = 0, n = tx.length; i < n; i++) {                        
                    address += '<span class="span4">' + escape(tx[i]) + '</span>';                      
                }
                var template = '<div>' +
                        '<div class="row-fluid"> ' + address + ' </div>' +
                        '</div>';
                return template;
            }
        },
        load            : searchHandler,
        onKeydown       : keyHandler,
        onDelete        : deleteHandler,
        onFocus         : textHandler('focus'),
    });

InformationsquelleAutor oasisfleeting

13

Können Sie eine placeholder Schlüssel als Teil des options-Objekt bei der Initialisierung. Ich konnte nicht finden die option in der Dokumentation und nur gefunden, es zu Graben, durch den code.
```
//init selectize
$(function() {
  $('select').selectize({
    placeholder: 'Click here to select ...',
  });
});
```
InformationsquelleAutor johnz0r
9

Benötigen Sie zwei Dinge:
- hinzufügen von leeren <option></option> als erste option-Tags im select.
- hinzufügen placeholder Schlüssel zu selectize nennen
- Das leere <option></option> ist es notwendig scheint. Danke für den Hinweis it out.
InformationsquelleAutor MikDiet

Können Sie angeben, Platzhalter für select Elemente durch hinzufügen eines leeren option element im select-tag. Hier ist ein Beispiel:

<select name="color" required>
    <option value=""> Select a color </option>
    <option value="1"> Lavender </option>
    <option value="2"> Eggplant </option>
    <option value="3"> Cool grey </option>
    <option value="4"> Bitter lemon </option>
</select>

Es muss getan werden dynamisch, wenn seine Eltern verändert.

InformationsquelleAutor Meti

1

Stellen Sie sicher, dass Sie ein select tag für selectize.

Ich hatte das gleiche problem, verursacht durch die Verwendung einer input-statt. selectize arbeitete auch, aber die placeholder Attribut nicht angezeigt.
Als ich geändert, um eine select es begann
```
<select type="text" placeholder="Type words of the article..."></select>
```
InformationsquelleAutor erandros

$('select#my-dropdown + .selectize-control').find('.selectize-control-input').prop({'placeholder': 'Placeholder Text'});

InformationsquelleAutor Robin Maben

0

selectize.js erstellen ein input unterhalb der select. Diese input haben die Klasse .selectize-control.

Können Sie ersetzen die placeholder dieser input Feld mit jQuery.

Können Sie etwas tun:
```
$(".selectize-control").attr('placeholder','Hello World!');
```
Wenn Sie möchten, eine funktionierende Beispiel, Krank brauchen mehr Informationen über deinen code.

InformationsquelleAutor Cas Bloem
0

Ich hatte ein ähnliches Problem - was frustrierend war, ist, würde ich etwas wie das hier tun:
```
$("selectize-input input[placeholder]").attr('placeholder','Hello World!');
```
Dann erst nach wechseln des Fokus es machen würde mein neues Platzhalter-text. Es stellt sich heraus, dass aus welchem Grund auch immer (wahrscheinlich gut) selectize gilt eine Breite dieses Eingangs.

Endgültige Lösung:
```
$(".selectize-input input[placeholder]").attr('placeholder','Hello World!');
$(".selectize-input input[placeholder]").attr("style", "width: 100%;");
```
InformationsquelleAutor Nathan Bertram

Aktualisieren können Sie die Platzhalter durch die Einstellung selectize.Einstellungen.Platzhalter und dann ruft selectize.updatePlaceholder().

JS:

$(document).ready(function() {
  var s = $('#input-tags').selectize({
    persist: false,
    createOnBlur: true,
    create: true,
    placeholder: 'start placeholder'
  })[0].selectize;

  $('#updatePlaceholder').click(function() {
    s.settings.placeholder = 'new placeholder';
    s.updatePlaceholder();
  });
});

HTML:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.default.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Selectize setting placeholder</h1>
    <input type="text" id="input-tags" value="">
    <button id="updatePlaceholder">change</button>
  </body>
</html>

InformationsquelleAutor JayChase

Dies ist was für mich gearbeitet (selectize version "selectize": "^0.12.4" und mit typescript nur):

this.selectize = $(this.select).selectize({
  options: this.options,
  placeholder: 'My Placeholder'
})[0].selectize;

this.selectize.settings.placeholder = 'Another Placeholder';
this.selectize.updatePlaceholder();

InformationsquelleAutor kaktusgruen

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.