title: devbridge autocomplete query AJAX implementation
body: <p>I'm getting trouble with <a href="https://www.devbridge.com/sourcery/components/jquery-autocomplete/" rel="nofollow">devbridge autocomplete</a> in my form</p>
  
  <p>my <strong>header</strong> section:  </p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="/autocomplete/jquery.autocomplete.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>page with input fields</strong> looks like this:  </p>
  
  <pre><code>&lt;script&gt;
  $('#client_recommendation').autocomplete({
      serviceUrl: '/autocomplete/ClientRecommendation.php',
      onSelect: function (suggestion) {
          alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
      }
  });
  &lt;/script&gt;
  
  &lt;form action="/scripts/add_client.php" method="post" name="add_client"&gt;
      &lt;fieldset&gt;
          &lt;label for="client_recommendation"&gt;Recommendation:&lt;/label&gt;
          &lt;input name="client_recommendation" size="25" type="text" id="client_recommendation" /&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>ClientRecommendation.php</strong>  </p>
  
  <pre><code>require '../scripts/connect.php';
  
  $cr  = trim($_GET['client_recommendation']); //also tried trim($_GET['query']);
  
  
      $sql = "SELECT  client_name, client_id
                            FROM (
                              SELECT CONCAT(
                                  client_name, ' ', client_surname, IF(
                                      LENGTH(client_prompt), 
                                      CONCAT(' (',client_prompt,')'), '')
                                  )
                              AS client_name, client_id
                              FROM `clients`
                            ) 
                            clients 
                            WHERE client_name LIKE '%" . $cr . "%' 
                            ORDER BY client_name";
  
      $result = $conn-&gt;query($sql); 
      $reply = array();
      $reply['query'] = $cr;
      $reply['suggestions'] = array();
  
      while($row = $result-&gt;fetch_assoc()) {
  
          $reply['suggestions'][]=$row['client_name'];
  
      }
  
      echo json_encode($reply);
  
      $conn-&gt;close();
  </code></pre>
  
  <p>as a test i tried this:  </p>
  
  <pre><code>$cr  = "pa";
  </code></pre>
  
  <p>and the <code>ClientRecommendation.php</code> returns correct result:  </p>
  
  <pre><code>{"query":"pa","suggestions":["Pavlo hryhorash"]}
  </code></pre>
  
  <p>which is valid JSON, but in my form I get nothing.
  Any help will be greatly appreciated</p>
  
  <p><strong>UPDATE</strong><br>
  I added <code>$(document).ready</code> to the script in page with input fields:  </p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function(){
      $('#client_recommendation').autocomplete({
          serviceUrl: '/autocomplete/ClientRecommendation.php',
          onSelect: function (suggestion) {
              alert('You selected: ' + suggestion.value);
          }
      });
      });
  &lt;/script&gt;  
  </code></pre>
  
  <p>After that the generated HTML markup for suggestions started to load with the page, and while typing in the input field I see this error in the console:  </p>
  
  <pre><code>Uncaught SyntaxError: Unexpected token &lt;
  m.parseJSON @ jquery.min.js:4g.transformResult @ 
  jquery.autocomplete.min.js:49(anonymous function) @  
  jquery.autocomplete.min.js:288j @ jquery.min.js:2k.fireWith @ jquery.min.js:2x @ 
  jquery.min.js:4b @ jquery.min.js:4
  </code></pre>