DevBridge Auto Complete Backend Diagram
DevBridge auto-sorts local json, but requires that remote json be presorted. This article describes how to implement a json filter for remote json files. It accepts multiple json files and converts them to a “suggestion” format. A value key must still be provided in the json for DevBridge. JSON records are sorted in ascending or descending order. The filter returns all records that match the query from any value, not just the sorted key.

Implementation Rules:

  1. There must be a “value” key in the json for DevBridgeAutoComplete.
  2. The format returned to the webpage must be: {“suggestions”: [{“value”: “name1”, “data”:”description1”},{“value”:“name2”,”data”:”description2”}]}.  “Suggestions” is handled by the driver.

INDEX.HTML (Build Front End here)

Id’s and class are required to use devbridgeautocomplete.  By setting up some variables in the script tag, we can change the parameters that devbridgeAutocomplete is passing via setOptions.  That will allow us to change the json files that we are pulling (jsoncategory), choose whether we are sorting via descending or ascending (sortdscnd), and choose what key:value pair key that we are going to sort by (sortkey). You can update these values via setOptions every time either dropdownlist or checkbox is changed via:
$(‘#cbsrtky,#ddlsortkey,#ddljsoncategory’).change(function() {
var srtdscvalue = ($(‘#cbsrtky’).is(“:checked”) ? “1” : “0”);
var srtkyvalue = document.getElementById(‘ddlsortkey’).value;
var jsncatval = document.getElementById(‘ddljsoncategory’).value;
//The .class doesn’t change the params on all tbs, only the first… use #ID selector.
params: {   sortdscnd : srtdscvalue,
sortkey : srtkyvalue,
jsoncategory : jsncatval
The onSelect in devbridgeAutocomplete allows the user to set values directly onto the webpage in the html elements.  Ex. use documents.getElementByID(“lblyear”).textContent = suggestion.year to set the selected record’s year.

DRIVERFORDATA.PHP (Middle Tier calls to data-sources and filter)

The Driverfordata includes two other php files.  Ensure the paths to DataRepository.php and DataFilter paths are correct in the driver:

  • include($_SERVER[‘DOCUMENT_ROOT’].”/scripts/typeahead/datasample/datafilter.php”);
  • include($_SERVER[‘DOCUMENT_ROOT’].”/scripts/typeahead/datasample/datarepository.php”);

Echos: {suggestions: *jsonfiledata* }.  The parameters accepted are:

  • $query:  The query is the search term generated by devbridgeAutoComplete.  It will search the entire json from the depth specified and lower.
  • $jsonfromfile:  This parameter is used by the driver to get the json files from the DataRepository.  Defaults to get the json files from the DataRepository.
  • $jsoncategory:  This parameter is used by the driver to determine which category of files you want from the datarepository.  It defaults to ‘all’ which returns the default case.
  • $getmstrkey:  This is true/false and determines whether you want a masterkey returned in your json.  Returning a masterkey breaks the devbridgeAutoComplete.   A masterkey is the place in the json array at a depth of 0 where a record occurs.  Defaults to false.
  • $depth:  This is the numerical depth of a multidimensional array.  Defaults to 0,
    • arrayouter{  //depth 0
      • arrayinner1{  //depth1
        • arraycenter1{0,1,2},  //depth2
        • arraycenter2{0,1,2}},
      • arrayinner2
        • {arraycenter1{0,1,2}}}
  • $sortkey:  This is the Key by which the query will be sorted, it defaults to “value” because “value” is required by devbridgeAutoComplete.
  • $sortdscnd:  This defaults to false and results in ascending values being returned.

DATAREPOSITORY.PHP  (add json/categories here)

The Data Repository determines which json files to get based upon a category using a switch.  By placing each one of the json calls into a named category, when that category is called, those json files can be used.   The json files to be used are returned in an array.  The switch in the repository should be updated to include any json that will be used.   All json files returned must use the same depth.

DATAFILTER.PHP (filters/sorts json)

Handled by the Driver, no changes/calls necessary.  Ensure the include path on the driver is correct.


I built this php project because I didn’t see a backend for devBridgeAutoComplete to parse through json files.   The devBridgeAutoComplete did parse local json, just not remote json.   I hadn’t coded anything in PHP and knew this would be useful to ITNachos current project as well as to other people who wanted to implement devBridgeAutoComplete with php.  Through this process, I learned how well written json can represent several entire records through the use of multidimensional arrays, and I gained php skills.  I believe the speed of the website vs. the use of a database like sql has proven to be noticeably improved with the use of json.
You can download a copy of the code on: github JSON-PHP-Filter
by: Patrick Knott

Contact us now for quick and personal attention

Contact Us - Blog