Problem on making a live search in Ajax and PHP

Question

0.00/5 (No votes)

See more:

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:

HTML

HTML

<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)">
              </form>
              <div class="search-person-res">
                <label id="Label-Result"></label>
                <div style="padding-top: 5px;" id="UserNameSearchResult"></div>
              </div>
           </div>

JS

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" ) );
            }
           
        }); 
    }

PHP

C#

<?php
  session_start();
    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);
    }
  


?>

Posted 19-Dec-15 7:38am

GeorgeGkas

Updated 30-Nov-20 9:32am

v3

Add a Solution

Comments

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

W∴ Balboos, *GHB* · Answer 1 · 2020-11-30T09:32:00

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.