Not able to create auto suggest feature with dynamic data

Question

I am using this plugin to create combination feature of autocomplete and tag. My code for input field and script related to it

<input id="form-tags-4" name="tags-4" type="text" value="">
<script type="text/javascript">
  $(function() {

    $('#form-tags-4').tagsInput({
      'autocomplete': {

        source: [
          'apple',
          'banana',
          'orange',
          'pizza'
        ]
      } 
    });
  });
</script>

It is working fine with static data, however i want that in place of static data that is stored in source dynamic data of database should get stored.

currently my dynamic data is in $normal_skill whose format looks like this

Array
(
    [0] => stdClass Object
        (
            [normal_skill] => HTML
        )

    [1] => stdClass Object
        (
            [normal_skill] => CSS
        )

    [2] => stdClass Object
        (
            [normal_skill] => Javascript
        )
)

I tried to collect the data from normal_skill and put it inside an array like this

$items = array();
foreach($normal_skill as $n_skill) {
 $items[] = $n_skill->normal_skill;
}

And in place of source i called $items, after replacing source with $items, the autosuggest and tag feature stopped working.

For testing I printed $items, it was showing data but when replaced with source then there was no data. Console is also not showing any particular error.

Can anyone please tell how i can replace source with my data and i would want it also performs letter to letter search. eg:- if i type "h" then words starting with h should come in autosuggest, however right now all the words containing "h" are getting displayed

Answer 1

Did you try passing it to the javascript with json_encode()?

<input id="form-tags-4" name="tags-4" type="text" value="">
<script type="text/javascript">
  $(function() {

    $('#form-tags-4').tagsInput({
      'autocomplete': {
        source: <?= json_encode($items) ?>
      } 
    });
  });
</script>

If its a remote source.

$items = array();
foreach($normal_skill as $n_skill) {
 $items[] = $n_skill->normal_skill;
}
exit(json_encode($items));

Then in your javascript, set it to the source file:

<script type="text/javascript">
  $(function() {

    $('#form-tags-4').tagsInput({
      'autocomplete': {
        source: './tags.php'
      } 
    });
  });
</script>