Load Remote JSON File for Autocomplete Flexdatalist in Wordpress

flexdatalist is not a function
advanced multi select data list
datalist data-value
datalist alternative
datalist in laravel
datalist events
datalist performance
datalist js

I have a json file which contains addresses, states and postcodes information. I utilized autocomplete flexdatalist to show suggestions while user types in the address. It works when the json file is local (data: 'myr-mini.json'), but when i use a url which starts like "http:/.." it doesn't work. Kindly help me on this one. Thanks in advance.

<input id="cp_address" name='Myr Address' type='text' class='flexdatalist' placeholder='Write your country name' size="40">
<input id='Postcode' name='Postcode' type='text' placeholder='enter zipcode' size="40">

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js?ver=1.12.3'></script>    
<script src="scripts/jquery.flexdatalist.js"></script>
<script>
     $('#cp_address').flexdatalist({
     minLength: 2,
     selectionRequired: true,
     visibleProperties: ["value","state"],
     searchContain: true,
     searchIn: 'value',
     searchDelay: 200,
     noResultsText: 'No results found for "{keyword}"',
     data: 'https://studentsklm.com/wp-content/themes/classipress/myr-mini.json'
}).on("select:flexdatalist",function(event, data){
  $('#Postcode').val(data.postcode);
});
</script>

It appears to be a CORS issue with trying to hit the URL for the JSON data. Below is a sample using myjson.com which has CORS enabled, and typing in "Per" into the country input brings back results:

$('#cp_address').flexdatalist({
  minLength: 2,
  selectionRequired: true,
  visibleProperties: ["value", "state"],
  searchContain: true,
  searchIn: 'value',
  searchDelay: 200,
  noResultsText: 'No results found for "{keyword}"',
  data: 'https://api.myjson.com/bins/v588t'
}).on("select:flexdatalist", function(event, data) {
  $('#Postcode').val(data.postcode);
});
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js?ver=1.12.3'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-flexdatalist/2.1.3/jquery.flexdatalist.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-flexdatalist/2.1.3/jquery.flexdatalist.min.css" />

<input id="cp_address" name='Myr Address' type='text' class='flexdatalist' placeholder='Write your country name' size="40">
<input id='Postcode' name='Postcode' type='text' placeholder='enter zipcode' size="40">

Load Remote JSON File for Autocomplete Flexdatalist in Wordpress, I have a json file which contains addresses, states and postcodes information. I utilized autocomplete flexdatalist to show suggestions while  The simplest way to add extra text is through a JSON file which you can attach to your input through a data attribute. For example, if you check out the Flexdatalist demo page you’ll find a “Countries” input field with the attribute data-data='countries.json'. This references a remote file that stores all the raw input data externally.

Since my json is a big file and i can't use services like myjson which has CORS enabled, therefore i had to figure out a way to do it, i waited for hours for an answer from someone to fix my issue, kept on refreshing this page many times, unfortunately i didn't get help, thats why i'm answering myself, hopefully it helps someone:)

Solution: I slightly changed the data with notepad++ find and replace, then i added the javascript autocomplete routine and saved it a javascript file named 'postmyr.js'. Then i included it my webpage nearly the end of body tag. (put the full url path)

<script type='text/javascript' src='https://yourdomain.com/wp-content/themes/classified/scripts/postmyr.js?ver=4.8'></script>

From this:

[
    { "postcode": "01000", "value": "Alor Redeh", "postoffice": "Kangar", "state": "Perlis" },
    { "postcode": "01000", "value": "Alor Tok Terang", "postoffice": "Kangar", "state": "Perlis" },
    { "postcode": "01000", "value": "Bohor Gelam", "postoffice": "Kangar", "state": "Perlis" },
    { "postcode": "01000", "value": "Jalan Abi Tok Hashim", "postoffice": "Kangar", "state": "Perlis" },
    { "postcode": "01000", "value": "Jalan Alor Sena", "postoffice": "Kangar", "state": "Perlis" },
]

To This:

var postmyr = [
    { postcode: '01000', value: 'Alor Redeh', postoffice: 'Kangar', state: 'Perlis'},
    { postcode: '01000', value: 'Alor Tok Terang', postoffice: 'Kangar', state: 'Perlis'},
    { postcode: '01000', value: 'Bohor Gelam', postoffice: 'Kangar', state: 'Perlis'},
    { postcode: '01000', value: 'Jalan Abi Tok Hashim', postoffice: 'Kangar', state: 'Perlis'},
    { postcode: '01000', value: 'Jalan Alor Sena', postoffice: 'Kangar', state: 'Perlis'},
];

    $('#cp_address').flexdatalist({
    minLength: 2,
    selectionRequired: true,
    visibleProperties: ["value","state"],
    searchContain: true,
    searchIn: 'value',
    searchDelay: 200,
    noResultsText: 'No results found for "{keyword}"',
    data: postmyr
}).on("select:flexdatalist",function(event, data){
    $('#cp_zipcode').val(data.postcode);

});

The above code i just showed 5 rows of my data, utleast you get the point, my full data has 54050 rows which works fine with no issues even with mobile devices.

Simple Flexible jQuery Autocomplete Plugin, Load the required jquery.flexdatalist.css file in the head section of the Create an input field that uses remote data from an external JSON file. Flexdatalist is a simple, flexible, powerful jQuery plugin which provides the 'autocomplete' functionality on your input field with support for local datalist and remote JSON data. The plugin also has the ability to select multiple items from an auto-suggest dropdown list that behaves like the tags input .

you have to change event from select:flexdatalist... to change:flexdatalist.

Try change your code as to following:

...
  valueProperty: 'postcode',
  data: postmyr
}).on("change:flexdatalist",function(event, data){
    $('#cp_zipcode').val(set.value);

Flexdatalist, Data from remote file. Load data from file countries.json . Like with <datalist> behavior, show the results as a suggestion. Please note in the HTML that in order to  Array of objects or a URL to JSON string/file. NOTE If using a URL, it will load the data once. url: string: null: URL to remote data source. This is useful when data is just too big to pass to data option. The request parameters are: keyword: Search keyword; load: Array of values flexdatalist is trying to load. Usually happens when setting the value directly, like on init or when adding a value.

Jquery autocomplete json array example, JSON is language independent. php file loaded the Autocomplete Jquery UI feature; jQuery Autocomplete Post Tagging System Like In WordPress. In the example below, plugin loads(via ajax) data from json file, located on the jQuery UI Autocomplete with a remote database and PHP generating JSON data I spent​  Include JS and CSS files First thing you need to do, is to download Jquery plugin file. More information about it can be found in the Download section The javascript – Yes the forms are all l…

EasyAutocomplete, EasyAutocomplete is a jquery autocomplete plugin. It has a lot of configuration options: supports local and remote data json xml, custom css styles, allows  WordPress is going through somewhat a transition lately with JSON REST API increasingly becoming a thing. And a good thing at that, because it's finally catching up with the rest of data-driven, JSON-powered world. What is JSON If you're unfamiliar with JSON (abbreviation for JavaScript Object Notation), simply put it's a standard format in which [Continue Reading]

libraries - cdnjs.com, JavaScript-autoComplete/1.0.4/auto-complete.min.js csv, parser, parse, parsing, delimited, text, data, auto-detect, comma, tab, pipe, file, filereader, stream, AngularJs, form, formly, json, bootstrap, html frontpress, wordpress, angular, rest, spa jquery-data-remote jquery-flexdatalist/2.2.4/jquery.​flexdatalist.min.js. 1 Set Text Input with Data from JSON depending on Selectbox Option or Autocomplete Selection Jul 17 '17 0 Load Remote JSON File for Autocomplete Flexdatalist in Wordpress Jul 29 '17 0 Show extra property in Jquery Autocomplete Suggestion e.g. show both First & Last Name during search Jul 29 '17

Comments
  • do you see, in your browser console, the message No 'Access-Control-Allow-Origin'? If yes, it's clear the reason. For more info you can search for CORS
  • I searched for CORS, not sure what i need to do. I tested the script on my website with the full url but it didn't work. I tried to include the json file same as the page path that is showing the form, but wordpress has different pathing style since the pages are auto generated by php. I'm thinking of linking the json file (5mb) just like scripts!?
  • Hi Woodrow, thanks for the assist. Yes with myjson it works. Earlier i tested a smaller json file it worked perfect, however my address json is a big file and i tried to upload it in myjson website many times but it was not successful with an error showing "413 Request Entity Too Large". The json file has many rows, i minified it but still considered big.
  • Can someone help me please. Tell me how to use my own json file in my website and be able to call it by using http url or any other way, in the autocomplete data parameter and fixing the CORS as well. I will really appreciate that time taken to assist.