title: Jquery UI autocomplete with Ajax starts with
body: <p>I am having problem with the autocomplete plugins of Jquery UI with Ajax.</p>
  
  <p>It works locally but it does not always work in the server because the console gives me "Uncaught TypeError: Cannot read property 'split' of null" whenever i use only one character or no character at all. it only works with 2 characters... its really weird really</p>
  
  <p>These are my files</p>
  
  <p>ajax.php:</p>
  
  <pre><code> &lt;?php
  require_once 'config.php';
  if(!empty($_POST['type'])){
      $type = $_POST['type'];
      $name = $_POST['name_startsWith'];
      $query = "SELECT id_pro, name, IFNULL(SUM(qty),0) as qty FROM inventory where ".$type." LIKE '%".$name."%' group by id_pro";
      $result = mysqli_query($con, $query);
      $data = array();
      while ($row = mysqli_fetch_assoc($result)) {
          $name = $row['id_pro'].'|'.$row['name'].'|'.$row['qty'];
          array_push($data, $name);
      }
  
      echo json_encode($data);exit; }?&gt;
  </code></pre>
  
  <p>auto.js</p>
  
  <pre><code>$(document).on('focus','.autocomplete_txt',function(){
  type = $(this).data('type');
  
  if(type =='id_pro')autoTypeNo=0;
  if(type =='name')autoTypeNo=1;
  
  
  $(this).autocomplete({
      source: function( request, response ) {
          $.ajax({
              url : 'ajax.php',
              dataType: "json",
              method: 'post',
              data: {
                 name_startsWith: request.term,
                 type: type
              },
               success: function( data ) {
                   response( $.map( data, function( item ) {
                      var code = item.split("|");
                      return {
                          label: code[autoTypeNo],
                          value: code[autoTypeNo],
                          data : item
                      };
                  }));
              }
          });
      },
      autoFocus: true,            
      minLength: 0,
      select: function( event, ui ) {
          var names = ui.item.data.split("|");                        
          id_arr = $(this).attr('id');
          id = id_arr.split("_");
          $('#itemNo_'+id[1]).val(names[0]);
          $('#itemName_'+id[1]).val(names[1]);
          $('#stock_'+id[1]).val(names[2]);
          $('#quantity_'+id[1]).val(1);
  
          }               
  });  });
  </code></pre>
  
  <p>despacho.php</p>
  
  <pre><code>   &lt;td&gt;&lt;input class="case" type="checkbox"/&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" data-type="id_pro" name="itemNo[]" id="itemNo_1" class="form-control autocomplete_txt changesNo" autocomplete="off" required&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" data-type="name" name="itemName[]" id="itemName_1" class="form-control autocomplete_txt changesNo" autocomplete="off" required&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="number" name="stock[]" id="stock_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" readonly&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="number" min="1" name="quantity[]" id="quantity_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" required&gt;&lt;/td&gt;
  </code></pre>