Samples
Sample 1 - Flat Json
HTML
<input class="form-control " id="statelist" name="statelist" type="text" value="">
JQuery
$("#statelist").apautocomplete({
data: datalist
});
var datalist = ["Andorra", "Albania", "Austria", "Åland Islands", "Bosnia and Herzegovina", "Belgium", "Bulgaria", "Belarus", "Switzerland", "Cyprus", "Czech Republic", "Germany", "Denmark", "Estonia", "Spain", "Finland", "Faroe Islands", "France", "United Kingdom", "Guernsey", "Greece", "Croatia", "Hungary", "Ireland", "Isle of Man", "Iceland", "Italy", "Jersey", "Liechtenstein", "Lithuania", "Luxembourg", "Latvia", "Monaco", "Moldova, Republic of", "Macedonia, The Former Yugoslav Republic of", "Malta", "Netherlands", "Norway", "Poland", "Portugal", "Romania", "Russian Federation", "Sweden", "Slovenia", "Svalbard and Jan Mayen", "Slovakia", "San Marino", "Ukraine", "Holy See (Vatican City State)"];
data: datalist
});
var datalist = ["Andorra", "Albania", "Austria", "Åland Islands", "Bosnia and Herzegovina", "Belgium", "Bulgaria", "Belarus", "Switzerland", "Cyprus", "Czech Republic", "Germany", "Denmark", "Estonia", "Spain", "Finland", "Faroe Islands", "France", "United Kingdom", "Guernsey", "Greece", "Croatia", "Hungary", "Ireland", "Isle of Man", "Iceland", "Italy", "Jersey", "Liechtenstein", "Lithuania", "Luxembourg", "Latvia", "Monaco", "Moldova, Republic of", "Macedonia, The Former Yugoslav Republic of", "Malta", "Netherlands", "Norway", "Poland", "Portugal", "Romania", "Russian Federation", "Sweden", "Slovenia", "Svalbard and Jan Mayen", "Slovakia", "San Marino", "Ukraine", "Holy See (Vatican City State)"];
Sample 2 - Ajax Query
HTML
<input class="form-control " id="statelist" name="statelist" type="text" value="">
JQuery
$("#statelist").apautocomplete({
url: "https://mysite.com/getdata",
type: "ajax",
});
url: "https://mysite.com/getdata",
type: "ajax",
});
Sample 3 - Flat Json Object
HTML
<input class="form-control " id="statelist" name="statelist" type="text" value="">
JQuery
$("#statelist").apautocomplete({
data: datalist
fields: ["name","code"]
valuefield: "code",
});
var datalist = [{ "name": "Andorra", "code": "AD" }, { "name": "Albania", "code": "AL" }, { "name": "Austria", "code": "AT" }, { "name": "Åland Islands", "code": "AX" }, { "name": "Bosnia and Herzegovina", "code": "BA" }, { "name": "Belgium", "code": "BE" }, { "name": "Bulgaria", "code": "BG" }, { "name": "Belarus", "code": "BY" }, { "name": "Switzerland", "code": "CH" }, { "name": "Cyprus", "code": "CY" }, { "name": "Czech Republic", "code": "CZ" }, { "name": "Germany", "code": "DE" }, { "name": "Denmark", "code": "DK" }, { "name": "Estonia", "code": "EE" }, { "name": "Spain", "code": "ES" }, { "name": "Finland", "code": "FI" }, { "name": "Faroe Islands", "code": "FO" }, { "name": "France", "code": "FR" }, { "name": "United Kingdom", "code": "GB" }, { "name": "Guernsey", "code": "GG" }, { "name": "Greece", "code": "GR" }, { "name": "Croatia", "code": "HR" }, { "name": "Hungary", "code": "HU" }, { "name": "Ireland", "code": "IE" }, { "name": "Isle of Man", "code": "IM" }, { "name": "Iceland", "code": "IC" }, { "name": "Italy", "code": "IT" }, { "name": "Jersey", "code": "JE" }, { "name": "Liechtenstein", "code": "LI" }, { "name": "Lithuania", "code": "LT" }, { "name": "Luxembourg", "code": "LU" }, { "name": "Latvia", "code": "LV" }, { "name": "Monaco", "code": "MC" }, { "name": "Moldova, Republic of", "code": "MD" }, { "name": "Macedonia, The Former Yugoslav Republic of", "code": "MK" }, { "name": "Malta", "code": "MT" }, { "name": "Netherlands", "code": "NL" }, { "name": "Norway", "code": "NO" }, { "name": "Poland", "code": "PL" }, { "name": "Portugal", "code": "PT" }, { "name": "Romania", "code": "RO" }, { "name": "Russian Federation", "code": "RU" }, { "name": "Sweden", "code": "SE" }, { "name": "Slovenia", "code": "SI" }, { "name": "Svalbard and Jan Mayen", "code": "SJ" }, { "name": "Slovakia", "code": "SK" }, { "name": "San Marino", "code": "SM" }, { "name": "Ukraine", "code": "UA" }, { "name": "Holy See (Vatican City State)", "code": "VA" }];
data: datalist
fields: ["name","code"]
valuefield: "code",
});
var datalist = [{ "name": "Andorra", "code": "AD" }, { "name": "Albania", "code": "AL" }, { "name": "Austria", "code": "AT" }, { "name": "Åland Islands", "code": "AX" }, { "name": "Bosnia and Herzegovina", "code": "BA" }, { "name": "Belgium", "code": "BE" }, { "name": "Bulgaria", "code": "BG" }, { "name": "Belarus", "code": "BY" }, { "name": "Switzerland", "code": "CH" }, { "name": "Cyprus", "code": "CY" }, { "name": "Czech Republic", "code": "CZ" }, { "name": "Germany", "code": "DE" }, { "name": "Denmark", "code": "DK" }, { "name": "Estonia", "code": "EE" }, { "name": "Spain", "code": "ES" }, { "name": "Finland", "code": "FI" }, { "name": "Faroe Islands", "code": "FO" }, { "name": "France", "code": "FR" }, { "name": "United Kingdom", "code": "GB" }, { "name": "Guernsey", "code": "GG" }, { "name": "Greece", "code": "GR" }, { "name": "Croatia", "code": "HR" }, { "name": "Hungary", "code": "HU" }, { "name": "Ireland", "code": "IE" }, { "name": "Isle of Man", "code": "IM" }, { "name": "Iceland", "code": "IC" }, { "name": "Italy", "code": "IT" }, { "name": "Jersey", "code": "JE" }, { "name": "Liechtenstein", "code": "LI" }, { "name": "Lithuania", "code": "LT" }, { "name": "Luxembourg", "code": "LU" }, { "name": "Latvia", "code": "LV" }, { "name": "Monaco", "code": "MC" }, { "name": "Moldova, Republic of", "code": "MD" }, { "name": "Macedonia, The Former Yugoslav Republic of", "code": "MK" }, { "name": "Malta", "code": "MT" }, { "name": "Netherlands", "code": "NL" }, { "name": "Norway", "code": "NO" }, { "name": "Poland", "code": "PL" }, { "name": "Portugal", "code": "PT" }, { "name": "Romania", "code": "RO" }, { "name": "Russian Federation", "code": "RU" }, { "name": "Sweden", "code": "SE" }, { "name": "Slovenia", "code": "SI" }, { "name": "Svalbard and Jan Mayen", "code": "SJ" }, { "name": "Slovakia", "code": "SK" }, { "name": "San Marino", "code": "SM" }, { "name": "Ukraine", "code": "UA" }, { "name": "Holy See (Vatican City State)", "code": "VA" }];
Demo 1 - Flat Json
Demo 3 - Flat Json Object
Sample 4 - Flat Json with MustExists
HTML
<input class="form-control " id="statelist" name="statelist" type="text" value="">
JQuery
$("#statelist").apautocomplete({
data: datalist
mustexists: true
});
var datalist = ["Andorra", "Albania", "Austria", "Åland Islands", "Bosnia and Herzegovina", "Belgium", "Bulgaria", "Belarus", "Switzerland", "Cyprus", "Czech Republic", "Germany", "Denmark", "Estonia", "Spain", "Finland", "Faroe Islands", "France", "United Kingdom", "Guernsey", "Greece", "Croatia", "Hungary", "Ireland", "Isle of Man", "Iceland", "Italy", "Jersey", "Liechtenstein", "Lithuania", "Luxembourg", "Latvia", "Monaco", "Moldova, Republic of", "Macedonia, The Former Yugoslav Republic of", "Malta", "Netherlands", "Norway", "Poland", "Portugal", "Romania", "Russian Federation", "Sweden", "Slovenia", "Svalbard and Jan Mayen", "Slovakia", "San Marino", "Ukraine", "Holy See (Vatican City State)"];
data: datalist
mustexists: true
});
var datalist = ["Andorra", "Albania", "Austria", "Åland Islands", "Bosnia and Herzegovina", "Belgium", "Bulgaria", "Belarus", "Switzerland", "Cyprus", "Czech Republic", "Germany", "Denmark", "Estonia", "Spain", "Finland", "Faroe Islands", "France", "United Kingdom", "Guernsey", "Greece", "Croatia", "Hungary", "Ireland", "Isle of Man", "Iceland", "Italy", "Jersey", "Liechtenstein", "Lithuania", "Luxembourg", "Latvia", "Monaco", "Moldova, Republic of", "Macedonia, The Former Yugoslav Republic of", "Malta", "Netherlands", "Norway", "Poland", "Portugal", "Romania", "Russian Federation", "Sweden", "Slovenia", "Svalbard and Jan Mayen", "Slovakia", "San Marino", "Ukraine", "Holy See (Vatican City State)"];
Sample 6 - Flat Json Object with Table view
HTML
<input class="form-control " id="statelist" name="statelist" type="text" value="">
JQuery
$("#statelist").apautocomplete({
data: datalist
fields: ["name","code"]
valuefield: "code",
view: "table",
});
var datalist = [{ "name": "Andorra", "code": "AD" }, { "name": "Albania", "code": "AL" }, { "name": "Austria", "code": "AT" }, { "name": "Åland Islands", "code": "AX" }, { "name": "Bosnia and Herzegovina", "code": "BA" }, { "name": "Belgium", "code": "BE" }, { "name": "Bulgaria", "code": "BG" }, { "name": "Belarus", "code": "BY" }, { "name": "Switzerland", "code": "CH" }, { "name": "Cyprus", "code": "CY" }, { "name": "Czech Republic", "code": "CZ" }, { "name": "Germany", "code": "DE" }, { "name": "Denmark", "code": "DK" }, { "name": "Estonia", "code": "EE" }, { "name": "Spain", "code": "ES" }, { "name": "Finland", "code": "FI" }, { "name": "Faroe Islands", "code": "FO" }, { "name": "France", "code": "FR" }, { "name": "United Kingdom", "code": "GB" }, { "name": "Guernsey", "code": "GG" }, { "name": "Greece", "code": "GR" }, { "name": "Croatia", "code": "HR" }, { "name": "Hungary", "code": "HU" }, { "name": "Ireland", "code": "IE" }, { "name": "Isle of Man", "code": "IM" }, { "name": "Iceland", "code": "IC" }, { "name": "Italy", "code": "IT" }, { "name": "Jersey", "code": "JE" }, { "name": "Liechtenstein", "code": "LI" }, { "name": "Lithuania", "code": "LT" }, { "name": "Luxembourg", "code": "LU" }, { "name": "Latvia", "code": "LV" }, { "name": "Monaco", "code": "MC" }, { "name": "Moldova, Republic of", "code": "MD" }, { "name": "Macedonia, The Former Yugoslav Republic of", "code": "MK" }, { "name": "Malta", "code": "MT" }, { "name": "Netherlands", "code": "NL" }, { "name": "Norway", "code": "NO" }, { "name": "Poland", "code": "PL" }, { "name": "Portugal", "code": "PT" }, { "name": "Romania", "code": "RO" }, { "name": "Russian Federation", "code": "RU" }, { "name": "Sweden", "code": "SE" }, { "name": "Slovenia", "code": "SI" }, { "name": "Svalbard and Jan Mayen", "code": "SJ" }, { "name": "Slovakia", "code": "SK" }, { "name": "San Marino", "code": "SM" }, { "name": "Ukraine", "code": "UA" }, { "name": "Holy See (Vatican City State)", "code": "VA" }];
data: datalist
fields: ["name","code"]
valuefield: "code",
view: "table",
});
var datalist = [{ "name": "Andorra", "code": "AD" }, { "name": "Albania", "code": "AL" }, { "name": "Austria", "code": "AT" }, { "name": "Åland Islands", "code": "AX" }, { "name": "Bosnia and Herzegovina", "code": "BA" }, { "name": "Belgium", "code": "BE" }, { "name": "Bulgaria", "code": "BG" }, { "name": "Belarus", "code": "BY" }, { "name": "Switzerland", "code": "CH" }, { "name": "Cyprus", "code": "CY" }, { "name": "Czech Republic", "code": "CZ" }, { "name": "Germany", "code": "DE" }, { "name": "Denmark", "code": "DK" }, { "name": "Estonia", "code": "EE" }, { "name": "Spain", "code": "ES" }, { "name": "Finland", "code": "FI" }, { "name": "Faroe Islands", "code": "FO" }, { "name": "France", "code": "FR" }, { "name": "United Kingdom", "code": "GB" }, { "name": "Guernsey", "code": "GG" }, { "name": "Greece", "code": "GR" }, { "name": "Croatia", "code": "HR" }, { "name": "Hungary", "code": "HU" }, { "name": "Ireland", "code": "IE" }, { "name": "Isle of Man", "code": "IM" }, { "name": "Iceland", "code": "IC" }, { "name": "Italy", "code": "IT" }, { "name": "Jersey", "code": "JE" }, { "name": "Liechtenstein", "code": "LI" }, { "name": "Lithuania", "code": "LT" }, { "name": "Luxembourg", "code": "LU" }, { "name": "Latvia", "code": "LV" }, { "name": "Monaco", "code": "MC" }, { "name": "Moldova, Republic of", "code": "MD" }, { "name": "Macedonia, The Former Yugoslav Republic of", "code": "MK" }, { "name": "Malta", "code": "MT" }, { "name": "Netherlands", "code": "NL" }, { "name": "Norway", "code": "NO" }, { "name": "Poland", "code": "PL" }, { "name": "Portugal", "code": "PT" }, { "name": "Romania", "code": "RO" }, { "name": "Russian Federation", "code": "RU" }, { "name": "Sweden", "code": "SE" }, { "name": "Slovenia", "code": "SI" }, { "name": "Svalbard and Jan Mayen", "code": "SJ" }, { "name": "Slovakia", "code": "SK" }, { "name": "San Marino", "code": "SM" }, { "name": "Ukraine", "code": "UA" }, { "name": "Holy See (Vatican City State)", "code": "VA" }];
Demo 4 - Flat Json with MustExists
Demo 6 - Flat Json Object with Table view