0

I'm new to PHP and trying to implement an autocomplete as a proof of concept for a project for work. The following is the code for the web page.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
  
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- jQuery UI library -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <!-- Initialize autocomplete  -->
<script>

      $(function() {
           $("#skill_input").autocomplete({source: "search.php",});
      });

</script>

</head>
<body> 
    <div class="container">
        <h4>Auto complete Input for countries</h4>
        <form method="post" action="submit.php">
            <label > Your Skills:</label>
            <input type="text" id = "skill_input" name="skill_input" placeholder="Start typing..."/>
            <input type="submit" name="submit" value="SUBMIT">
        </form>
    </div>

</body>
</html>

The page displays as it should. As I type a valid search term for what is in the DB nothing happens. e.g. "Ger" I'm running the site on xampp.

My DB is loaded with countries. I put an echo in my DB module to see if it is reached. It is not displaying unless I use the URL of the DB module directly. When I go to the DB module directly using the URL http://localhost:8012/Managers/search.php?term=Ger I receive the following

we are in the search php file [“Algeria”,”Germany”,”Niger”,”Nigeria”]

This seems to indicate that the DB module is working e.g. accepting a search value, accessing the DB and returning data as expected.

So it appears to me that the script

$(function() {
      $("#skill_input").autocomplete({
          source: "search.php",
      });enter code here
});

</script>

is not sending any data to the "search.php" page. My question is why? Can anyone help me understand why the page is not sending any data to search.php? I would assume that it is not even calling search.php as I'm not seeing the echo message unless I use the URL directly.

jarlh
  • 42,561
  • 8
  • 45
  • 63
Daryl
  • 9
  • 2
  • Which dbms are you using? With some fancy SQL support, you can most of the work right there. – jarlh Jun 10 '21 at 15:36
  • Your source should contain an AJAX call – devlin carnate Jun 10 '21 at 15:39
  • Which autocomplete component are you using? Looks like [tag:jquery-ui-autocomplete] – freedomn-m Jun 10 '21 at 15:39
  • 2
    Check the browser network tab to confirm that a request is being made and what the parameters are for that request (and that it doesn't 404) then the response value. Copy that response and put it directly in the `source:` as a test, as detailed in the [jquery-ui docs](https://api.jqueryui.com/autocomplete/#option-source). You should be able to find where the issue is if you step though and check every step. – freedomn-m Jun 10 '21 at 15:43
  • @Daryl Is there any error console ? – Indra Kumar S Jun 10 '21 at 16:02
  • You code is working fine. You should check console and network tabs – Indra Kumar S Jun 10 '21 at 16:05
  • I checked the Network tab and it shows that the code is executing successfully in the "search.php". It shows the proper return of values. So now I just need to figure out what I'm doing wrong regarding passing back the information. – Daryl Jun 11 '21 at 12:31
  • I did some digging and found the issue. The code I needed to send the data back is /* Toss back results as json encoded array. */ $json_array = array(); $json_array = json_encode($return_arr); //array_push $json_array; echo json_encode($return_arr); – Daryl Jun 11 '21 at 13:32

1 Answers1

0

The return of data is resolved.

/* Toss back results as json encoded array. */
    $json_array = array();
    $json_array = json_encode($return_arr);
    echo json_encode($return_arr);

The above code coverts the response from the DB to json and then returns the data.

Daryl
  • 9
  • 2
  • Please add some explanation to your answer. What does the given code do? How does it resolve the given problem? – Nico Haase Jun 11 '21 at 13:43