Click here to Skip to main content
15,845,367 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I want to create a live search box in my html project. The user will use an input box and typing the email he gets the results when the user is found in the database or not. Depending of the result, the PHP will send an array of data back to JQery so I can update my front-end.
Unfortunately, I have problems passing the data from JQuery to PHP. I tried many methods from the web, and I can't understand why I can not accomplish what I want.

Here's my code:

<div id="person-search">
              <form >
                <label class="person-search-label">Insert Person's Id</label>
                <input type="email" class="person-search-input" onkeyup="ShowSearchResult(this.value)">
              <div class="search-person-res">
                <label id="Label-Result"></label>
                <div style="padding-top: 5px;" id="UserNameSearchResult"></div>

function ShowSearchResult(value) {
        $.post("lib/search.php", {name:value},function(data){
            document.getElementById('Label-Result').innerHTML = data[0];
            if (data[1] != null) {
                document.getElementById('UserNameSearchResult').innerHTML = data[1];
                var addBtn = "<form method=\"post\"><button class=\"add-new-person\" type=\"submit\">Add the person</button></form>";
                $( addBtn ).insertAfter( $( "#UserNameSearchResult" ) );

    define("DB_HOST", '');
    define("DB_USER", '');
    define("DB_PASSWORD", '');
    define("DB_DATABSE", '');

    $conn = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
    mysql_select_db(DB_DATABSE, $conn);
    $search = $_POST["name"];
    $sq = mysql_query("SELECT * FROM Users WHERE UserEmail = '%{$search}%'");
    $UserInfo = mysql_fetch_row($sq);
    if ($UserInfo) {
      $data = array('We found results', $UserInfo[2]);
      echo json_encode($data);
    else {
      $data = array('We couldn\'t found results', null);
      echo json_encode($data);

Updated 30-Nov-20 10:32am
Mohibur Rashid 19-Dec-15 21:06pm    
Break your problem into small pieces. Say, step 1: make sure your javascript post works. Reveive the post, dont call database related function, return your result as json data, verify your callback function. Step 2: do your database part.
[no name] 10-Apr-18 4:27am    
You can follow this tutorial for creating search in php and mysql using AJAX with live search functionality. This tutorial use xampp stack to build search engine on.
Sunasara Imdadhusen 10-Apr-18 5:50am    
You must specify where is the problem? like are you able to successfully hit the server using AJAX? Are you able to get the result from server? are you able to get the response from server but coudn't able to show the list in drop down?

1 solution

This is independent of whether you us jquery or plain vanilla javascript in conjunction with PHP.

PHP is serverside; javascript is client side.

PHP can create output (when it builds a page) to assign values to javascript when the page is rendered.

Javascript cannot move a value into php on the client: there is no php on the client.
To go from client the client side to the server side you have to popular and common methods: <forms> and AJAX.
The first sends all the items with an name attribute to the target file specified when the it is submitted. You need to retrieve these values in one of the PHP arrays in which it arrives, such as $_POST, $_GET or $_REQUEST (which looks at both).
The second method, which I prefer, stores them in a similar fashion but you pick what you wish from throughout the page and typically retrieve it via the DOM and its ID. You target a php file and read it out as you did with the <form> route.

Summary: you need to send javaScript-ish values to the server side to get them into PHP.
Share this answer
Richard Deeming 1-Dec-20 4:26am    
Hopefully the OP isn't still looking for a solution. :)
W Balboos, GHB 1-Dec-20 7:47am    
I pulled it from near the top of the list - it was apparently updated that day. So, by who? The OP, perhaps? Someone pulled it back to the unanswered cue's top with the update.

Maybe they were still waiting!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900