Materialize autocomplete with dynamic data in jquery ajax
Solution 1
Using ajax API call for materializecss input autocomplete
I have modified as below to obtain autocomplete input for Countries.
You can get the list of country names from API https://restcountries.eu/rest/v2/all?fields=name
$(document).ready(function() {
//Autocomplete
$(function() {
$.ajax({
type: 'GET',
url: 'https://restcountries.eu/rest/v2/all?fields=name',
success: function(response) {
var countryArray = response;
var dataCountry = {};
for (var i = 0; i < countryArray.length; i++) {
//console.log(countryArray[i].name);
dataCountry[countryArray[i].name] = countryArray[i].flag; //countryArray[i].flag or null
}
$('input.autocomplete').autocomplete({
data: dataCountry,
limit: 5, // The max amount of results that can be shown at once. Default: Infinity.
});
}
});
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<label for="country">Autocomplete</label>
<input type="text" id="country" class="autocomplete">
</div>
</div>
</div>
</div>
Solution 2
Good day. I can suggest a little different approach. Materialize autocomplete has method
updateData
So if we want to get ajax to load data, we may add event listener to input field
$(".autocomplete").each(function () {
let self = this;
$(this).autocomplete();
$(this).on("input change", function () {
$.ajax({
url: '/source/to/server/data',
type: 'post',
cache: false,
data: {"some": "data"},
success: function (data) {
data = JSON.parse(data);
$(self).autocomplete("updateData", data/*should be object*/);
},
error: function (err) {
console.log(err);
}
});
});
});
Not ideal for different data sources, but may be a starting point.
AMeh
Updated on July 05, 2022Comments
-
AMeh almost 2 years
I'm using materialize ui in an ASP.Net MVC application and I'm using an autocomplete control with dynamic data.
Here is my code,
<div class="row"> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <i class="material-icons prefix">textsms</i> <input type="text" id="autocomplete-input" class="autocomplete"> <label for="autocomplete-input">Autocomplete</label> </div> </div> </div> </div>
This is the jquery ajax call,
$(function () { $.ajax({ type: 'GET', // your request type url: "/Home/GetData/", success: function (response) { var myArray = $.parseJSON(response); debugger; $('input.autocomplete').autocomplete({ data: { "Arizona (1)": null, "Florida (2)": null, "Georgia (3)": null, "Hawaii(4)": null, "Idaho (5)": null, "Illinois (6)": null } }); } }); });
It can accept data only in this format and this is my response,
"[["Arizona (1)"],["Florida (2)"],["Georgia (3)"],["Hawaii (4)"],["Idaho (5)"],["Illinois (6)"]]"
How do I convert my response into the format that autocomplete understands?