Click here to Skip to main content
14,668,470 members
Rate this:
Please Sign up or sign in to vote.
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 19-Dec-15 7:45am
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.
Fazian Akram Dar 20-Dec-15 3:14am
[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?

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

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100