How to bind select2 and mysql databse with php

I am trying to bind my select2 input to get results from mysql database, using mysqli connection.I tried several solutions here but have yet to make it work, instead it keeps saying no results found.

The latest I have tried was the javascript code from https://select2.github.io/examples.html. I am not sure if it is my javascript that is failing me or my php file.

These are my codes, hope someone can point to me where needs to be change.

HTML

<div class="form-group">
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
     <label class="control-label col-lg-3" for="Customer" id="Customer"><span style="color:red;">*</span>Customer:</label>
     <div class="col-lg-9">
        <input id="cCustomer" name="cCustomer" class="cCustomer form-control" type="hidden" value="" style="width: 100%" />   
     </div><!-- END col-lg-9  -->
  </div><!-- END col-xs-12 col-sm-12 col-md-6 col-lg-6  -->
</div><!-- END .form-group  -->

I did include

<link rel="stylesheet" href="//localhost/1System/select2/css/select2.min.css">
<link rel="stylesheet" href="//localhost/1System/select2/css/select2-bootstrap.min.css">
<script type="text/javascript" src="//localhost/1System/select2/js/select2.full.min.js"></script>

in my <head></head>

JS

$(document).ready(function() {
    $("#cCustomer").select2({
        ajax: {
            url: "../../autoComplete/autoAddQuotation1.php",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term, // search term
                    page: params.page
                };
            },
            processResults: function (data, page) {
                // parse the results into the format expected by Select2.
                // since we are using custom formatting functions we do not need to
                // alter the remote JSON data
                return {
                    results: data.items
                };
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 1,
        //templateResult: formatRepo, // omitted for brevity, see the source of this page
        //templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
    });
});

Lastly my PHP

<?php
   include($_SERVER['DOCUMENT_ROOT']."/1System/php/connect.php");//calling connection file

   $conn=dbConnect();
   if (!$conn)
      die("Couldn't connect to MySQL"); /*when server is down, the statement will be showed*/
   
   $query = "SELECT c.customerID, c.name AS cname FROM customer c WHERE c.name LIKE '%".strtoupper($_GET['q'])."%' or '%".($_GET['q'])."%'";
   $result = mysqli_query($conn, $query);
   $numCustomer = mysqli_num_rows($result);

   if($numCustomer != 0) {
      while(row = mysqli_fetch_array($result)) {
         $answer[] = array("id"=>$row['customerID'], "text"=>$row['cname']);
      }
   }else {
      $answer[] = array("id"=>"0", "text"=>"No Results Found...");    
   }
   echo json_encode($answer);
?>

I am using mysqli to connect to my database. My connection is working for the other php pages.

$conn = mysqli_connect($host, $username, $password);

To be honest I don really know how should the PHP file look like? anyone can point me towards a good example or a right direction.

PROBLEM:
When I click on the input on my chrome, it indicated as no results found.

Thanks for help in advance.

Use the development tools to put a stop point in your javascript at the end of the data function. Find the current value of “q”. Put that into your php page (manually visit autoAddQuotation1.php?q={value of q} ) and see what happens.

(PS: My guess is that what’s actually happening is the ajax call is balling the data up into a POST and sending it not as $_GET[‘q’] but $_POST[‘data’] or somesuch)

Hi, Sorry, I don’t quite get you here. How should I do that? pardon me I am not very good in javascript. Thanks.

Well, I dont know what browser you’re using. Here’s a link for Chrome…
Google - Debugging Javascript in Chrome

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.