title: How can I bind data from db (jQuery) to an autocomplete?
body: <p>I try to bind the data from a database tabel to an autocomplete edit field.
  But somehow I don't succeed and need help.</p>
  <p>I have the data on another webpage already in a dropdown combo. How can I access this data or replicate the funcionality for the edit field?</p>
  <p>Thx for any hint.
  -Adrian</p>
  <p>I want the data from the db show up where I am using the country arry right now:</p>
  <pre><code>    /*An array containing all the country names in the world:*/
      var countries = [&quot;Afghanistan&quot;,&quot;Albania&quot;,&quot;Algeria&quot;,&quot;Andorra&quot;,&quot;Angola&quot;,&quot;Anguilla&quot;,&quot;Antigua &amp; Barbuda&quot;,&quot;Argentina&quot;,&quot;Armenia&quot;,&quot;Aruba&quot;,&quot;Australia&quot;,&quot;Austria&quot;,&quot;Azerbaijan&quot;,&quot;Bahamas&quot;,&quot;Bahrain&quot;,&quot;Bangladesh&quot;,&quot;Barbados&quot;,&quot;Belarus&quot;,&quot;Belgium&quot;,&quot;Belize&quot;,&quot;Benin&quot;,&quot;Bermuda&quot;,&quot;Bhutan&quot;,&quot;Bolivia&quot;,...];
     
      /*initiate the autocomplete function on the &quot;myInput&quot; element, and pass along the countries array as possible autocomplete values:*/
      autocomplete(document.getElementById(&quot;myInput&quot;), countries);
  &lt;/script&gt;
  </code></pre>
  <p>And to get the code from the database the following code seems to be used in another file of the project:</p>
  <pre><code>/**
       * Loads skills into the table.
       * @param {array} skills An array of skills.
       */
      loadTable: function(skills) {
          if(typeof skills != &quot;object&quot;) skills = [];
  
          if ( $.fn.dataTable.isDataTable( '#dyn_skills' ) ) {
                  $('#dyn_skills').DataTable().destroy();
                  }
  
          var t = $(&quot;table.skills&quot;);
  
          // remove tr elements which do not have
          // the class &quot;head&quot;, &quot;template&quot; or &quot;status&quot;
          $(&quot;tr:not(.head,.template,.status)&quot;, t).remove();
  
          // no skills found
          if(! skills.length) {
              $(&quot;tr.status td&quot;, t).empty().append(_(&quot;No skills found.&quot;));
              $(&quot;tr.status td&quot;, t).show();
          } else {
              $(&quot;tr.status&quot;, t).remove();
          }
  
          if(skills.length) {if ( $.fn.dataTable.isDataTable( '#dyn_skills' ) ) {
                  DynTable = $('#dyn_skills').DataTable();
              }
              else {
                  DynTable = $('#dyn_skills').DataTable( {
                      &quot;data&quot; : skills,
                      &quot;columns&quot; : [
                          { &quot;data&quot; : &quot;id&quot;, &quot;title&quot; : _(&quot;Id&quot;) },
                          { &quot;data&quot; : &quot;preferredLabel&quot; , &quot;title&quot; : _(&quot;Name&quot;) },
                          { &quot;data&quot; : &quot;description&quot; , &quot;title&quot; : _(&quot;Description&quot;) }
  
                      ],
                      &quot;lengthMenu&quot;: [ 5, 10, 25, 50],
                      stateSave: true,
                      &quot;language&quot;: {
                          &quot;decimal&quot;:        &quot;&quot;,
                          &quot;emptyTable&quot;:     _(&quot;No data available in table&quot;),
                          &quot;info&quot;:           _(&quot;Showing _START_ to _END_ of _TOTAL_ entries&quot;),
                          &quot;infoEmpty&quot;:      _(&quot;Showing 0 to 0 of 0 entries&quot;),
                          &quot;infoFiltered&quot;:   _(&quot;(filtered from _MAX_ total entries)&quot;),
                          &quot;infoPostFix&quot;:    &quot;&quot;,
                          &quot;thousands&quot;:      &quot;,&quot;,
                          &quot;lengthMenu&quot;:     _(&quot;Show _MENU_ entries&quot;),
                          &quot;loadingRecords&quot;: _(&quot;Loading...&quot;),
                          &quot;processing&quot;:     _(&quot;Processing...&quot;),
                          &quot;search&quot;:         _(&quot;Search:&quot;),
                          &quot;zeroRecords&quot;:    _(&quot;No matching records found&quot;),
                          &quot;paginate&quot;: {
                              &quot;first&quot;:      _(&quot;First&quot;),
                              &quot;last&quot;:       _(&quot;Last&quot;),
                              &quot;next&quot;:       _(&quot;Next&quot;),
                              &quot;previous&quot;:   _(&quot;Previous&quot;)
                          },
                          &quot;aria&quot;: {
                              &quot;sortAscending&quot;:  _(&quot;: activate to sort column ascending&quot;),
                              &quot;sortDescending&quot;: _(&quot;: activate to sort column descending&quot;)
                          }
                       }
                  } );
                  //read from url parameter and set datatables search value
                  $.urlParam = function(name){
                      var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
                      if (results==null) return null;
                      else return results[1] || 0;
                  }
                  var datatablesfilter = $.urlParam('datatablesfilter');
                  if(datatablesfilter == null) DynTable.search(&quot;&quot;).draw();
                  else DynTable.search(datatablesfilter).draw();
              }
          }
  
  // On click the selected row gets the class &quot;selected_row&quot;
  // The class &quot;selected_row&quot; is highlighted via CSS
  // and used as a row selection marker for performing any action &quot;edit&quot; or &quot;delete&quot;
  
      $('#dyn_skills tbody').on( 'click', 'tr:not(.status)', function () {
  
          $(&quot;table#dyn_skills  tr.selected_row&quot;).removeClass('selected_row');
          $(this).addClass('selected_row');
          event.stopPropagation();
  
      } );
  
  // binding event button #button_edit
  // Read the data from the marked row and call the API function
  
       $(&quot;button#button_edit&quot;).click( function () {
  
          if (! $(&quot;table#dyn_skills  tr.selected_row&quot;).length ){
          alert(_(&quot;Please select a row from the table!!!&quot;));
          }
          else
          {
          var skill_id = $(&quot;table#dyn_skills  tr.selected_row td:eq(0)&quot;).text();
          var skill_name = $(&quot;table#dyn_skills  tr.selected_row td:eq(1)&quot;).text();
          var skill_description = $(&quot;table#dyn_skills  tr.selected_row td:eq(2)&quot;).text();
  
          KPP.loadDialog(&quot;.template.skill-edit-dialog&quot;, null, function(self) {
                  $(&quot;.skill-id&quot;, self).empty().append(skill_id);
                  $(&quot;.skill-name&quot;, self).val(skill_name);
                  $(&quot;.skill-description&quot;, self).empty().append(skill_description);
                  $(&quot;.skill-send&quot;, self).click(function() {
                      KPP.Skill.edit(skill_id, {
                          &quot;name&quot;: $(&quot;.skill-name&quot;, self).val(),
                          &quot;description&quot;: $(&quot;.skill-description&quot;, self).val()
                      });
                  });
  
                  $(&quot;.skill-name&quot;, self).focus(); // set focus
              });
          }
      } ); // end of button_edit
  </code></pre>