Autocomplete Json :: 4programmers.net

Kubik93

2020-02-01T16:38:35+01:00

Rejestracja: dni
Ostatnio: dni
Postów: 6

Cześć,
mam skrypt Easyautocomplete (autosugestia)
http://easyautocomplete.com/

sugestie pobieram z pliku Json a sam kod do pobrania wygląda tak.

Kopiuj

<script type="text/javascript">

 
var options = {
	
  url: "js/countries.json",

  getValue: "name",

  list: {
    match: {
      enabled: true
    },
    maxNumberOfElements: 8
  },

  template: {
    type: "custom",
    method: function(value, item) {
      return "<span class='flag flag-" + (item.code).toLowerCase() + "' ></span>" + value;

    }
  },
  
};

$("#countries-flags").easyAutocomplete(options);

</script>

Chciałbym aby ""js/countries.json"" wstawić tam zmienną która będzie się zmieniać wraz ze zmianą radio.
Dajmy na to mamy inputy name"country" value="PL"/value="DE" itd.

Cały skrypt ma pobierać dane z różnych Jsonów w zależności od wybranego inputa najlepiej AJAXem bez przeładowania strony.

Jak się za to zabrać?

złoty

2020-02-01T22:59:23+01:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Warszawa
Postów: 109

Po pierwsze, zapisz sobie "szablon" opcji tego pluginu w jakimś miejscu

Kopiuj

window.autocompleteOptions = {
    getValue: "name",
    url: "countries-de.json",
    list: {
        match: {
            enabled: true
        },
        maxNumberOfElements: 8
    },
    template: {
        type: "custom",
        method: function (value, item) {
            return "<span class='flag flag-" + (item.code).toLowerCase() + "' ></span>" + value;
        }
    },
};

Po drugie, dodaj obsługę zdarzenia change radio inputa np.

Kopiuj

$(function () {
    $("#german-radio-button").on("change", updateAutocomplete);
    $("#polish-radio-button").on("change", updateAutocomplete);
});

I po trzecie, w obsłudze zdarzenia podmieniaj url w opcjach skryptu i wołaj go ponownie:

Kopiuj

function updateAutocomplete(event) {
    window.autocompleteOptions.url = `countries-${event.target.value}.json`;
    $("#countries-flags").easyAutocomplete(window.autocompleteOptions);
}

W Twoim przypadku potrzebne będą skrypty countries-PL.json i countries-DE.json, pole value radio inputa steruje 'sufiksem' nazwy pliku, z którego ładowane są dane.

Kubik93

2020-02-02T11:59:30+01:00

Rejestracja: dni
Ostatnio: dni
Postów: 6

Wow! działa :)

Jeszcze musiałbym zrobić tak aby po przeładowaniu strony skrypt ładował ostatnie radio. Czyli pole checked :)

dzięki z góry za pomoc!!

Kubik93

2020-02-02T23:32:28+01:00

Rejestracja: dni
Ostatnio: dni
Postów: 6

Kopiuj

var radios = document.getElementsByName('country');

for (var i = 0, length = radios.length; i < length; i++) {
  if (radios[i].checked) {
    break;
  }
}

Temat do zamkniecia :)

Liczba odpowiedzi na stronę

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto