Selectize.js wybrana opcja na gorze listy

Witam,

Użyłem biblioteki selectize.js (nie moge umiescic linka, jako że to mój pierwszy post)

Działa dobrze. Wyszukuje mi po nazwie kraju, kodzie i prefiksie. Nie moge jednak zrobic aby wybrana opcja pojawiala sie na gorze listy.

Dodalem pole "priority" do listy i na onChange zmieniam wartosc dla wybranej opcji, dzieki czemu przy sortowaniu wstawiana jest na perwszym miejscu.

Problem jest w tym, że wybrana opcja pojawia sie jako pierwsza z opóznieniem. Jeśli wybiore kraj A, to przy nastepnym otwarciu listy nie pojawia sie jako pierwszy, dopiero jak wybiore kraj B wtedy przy następnym otwarciu listy kraj A jest na pierwszym miejscu.

Czy ma ktoś pomysl co jest nie tak?

 <script type="text/javascript" src="selectize.js"></script>
 <link rel="stylesheet" type="text/css" href="selectize.css" />
          
<select class="selectize-js"></select>

    const initialize = () => {
        const selectFields = document.querySelectorAll('.selectize-js');
        
        selectFields && selectFields.forEach( select => {
          
            $(select).selectize({
                create: false,
                maxItems: 1,
                valueField: 'country',
                labelField: 'pref',
                searchField: ['country', 'pref', 'code'],
                sortField: [{
                    field: 'priority',
                    direction: 'asc'
                },{
                    field: 'country',
                    direction: 'asc'
                }],
                highlight: true,
                placeholder: 'Search',
                openOnFocus: true,
                options: countryCodes,
                items: ['Bhutan'],
                render: {
                    item: function(item, escape) {
                        return `
                            <div class="select-item">
                            <span>${escape(item.pref)}</span>
                            </div>
                        `;
                    },
                    option: function(item, escape) {
                        return `
                            <div class="select-item">
                                <span class="select-item__country">${escape(item.pref)}</span>
                                <span class="select-item__prefix">${escape(item.country)}</span>
                            </div>
                        `;
                    }
                },
                onChange: function(item) {

                    let self = this;
                    
                    if (this.options) {
                        for (const [key, value] of Object.entries(this.options)) {
                            this.options[key].priority = 1;
                        }
                        this.options[item].priority = 0;
                        }
                },
               
                
            });
        });
    };    

    const countryCodes = [
        {
            "country": "Afghanistan",
            "pref": "+93",
            "code": "AF",
            "priority": "1"
        },
        {
            "country": "Aland Islands",
            "pref": "+358",
            "code": "AX",
            "priority": "1"
        },
        {
            "country": "Albania",
            "pref": "+355",
            "code": "AL",
            "priority": "1"
        },
        {
            "country": "Algeria",
            "pref": "+213",
            "code": "DZ",
            "priority": "1"
        },
        {
            "country": "AmericanSamoa",
            "pref": "+1684",
            "code": "AS",
            "priority": "1"
        },
        {
            "country": "Andorra",
            "pref": "+376",
            "code": "AD",
            "priority": "1"
        },
        {
            "country": "Angola",
            "pref": "+244",
            "code": "AO",
            "priority": "1"
        },
        {
            "country": "Anguilla",
            "pref": "+1264",
            "code": "AI",
            "priority": "1"
        },
       
    ];

W jednym miejscu przypisujesz priority jako tekst

const countryCodes = [
  {
    // ...
    "priority": "1"
  },
  {
    // ...
    "priority": "1"
  }
];

w drugim jako liczbę

 this.options[key].priority = 1;

Spróbuj w obu miejscach przypisać liczbę

Xarviel napisał(a):

W jednym miejscu przypisujesz priority jako tekst

const countryCodes = [
  {
    // ...
    "priority": "1"
  },
  {
    // ...
    "priority": "1"
  }
];

w drugim jako liczbę

 this.options[key].priority = 1;

Spróbuj w obu miejscach przypisać liczbę

Poprawione, jednak w pętli jest liczba przypisywana do wszystkich

for (const [key, value] of Object.entries(this.options)) {
                            this.options[key].priority = 1;
                        }

Generalnie to działa, tylko ze wybrane pole jest dodawane na gore listy dopiero po wybraniu nastepnego pola.

ArekKDev napisał(a):

Poprawione, jednak w pętli jest liczba przypisywana do wszystkich

for (const [key, value] of Object.entries(this.options)) {
  this.options[key].priority = 1;
}

Generalnie to działa, tylko ze wybrane pole jest dodawane na gore listy dopiero po wybraniu nastepnego pola.

Jest przypisywana, ale tak jak zauważyłeś dopiero po zmianie wartości, zresztą metoda onChange dość dobrze to tłumaczy

Nie wiem, czy to zadziała, bo ja tak strzelam sobie w ciemno (nigdy nie używałem tej biblioteki), ale spróbuj jeszcze skorzystać z metody onLoad

https://selectize.dev/docs.html

onLoad(data)
Invoked when new options have been loaded and added to the control (via the load option or load API method).

i ustawiać odpowiednie priority przed załadowaniem danych jeśli ta początkowa wartość z obiektu countryCodes nie jest respektowana :(

{
  onChange: function(item) {
    let self = this;
    
    if (this.options) {
      for (const [key, value] of Object.entries(this.options)) {
        this.options[key].priority = 1;
      }
      
      this.options[item].priority = 0;
    }
  },

  onLoad: function(item) {
    // ...
  }
}

Xarviel napisał(a):

ArekKDev napisał(a):

Poprawione, jednak w pętli jest liczba przypisywana do wszystkich

for (const [key, value] of Object.entries(this.options)) {
  this.options[key].priority = 1;
}

Generalnie to działa, tylko ze wybrane pole jest dodawane na gore listy dopiero po wybraniu nastepnego pola.

Jest przypisywana, ale tak jak zauważyłeś dopiero po zmianie wartości, zresztą metoda onChange dość dobrze to tłumaczy

Nie wiem, czy to zadziała, bo ja tak strzelam sobie w ciemno (nigdy nie używałem tej biblioteki), ale spróbuj jeszcze skorzystać z metody onLoad

https://selectize.dev/docs.html

onLoad(data)
Invoked when new options have been loaded and added to the control (via the load option or load API method).

i ustawiać odpowiednie priority przed załadowaniem danych jeśli ta początkowa wartość z obiektu countryCodes nie jest respektowana :(

{
  onChange: function(item) {
    let self = this;
    
    if (this.options) {
      for (const [key, value] of Object.entries(this.options)) {
        this.options[key].priority = 1;
      }
      
      this.options[item].priority = 0;
    }
  },

  onLoad: function(item) {
    // ...
  }
}

W tym przypadku onLoad nie działa, dane nie sa ładowane z API.