PHP search function not displaying results

Question

I've been playing around with PHP and ajax and trying to get it to produce my results. For some reason though, it's not working at all. I will write in some words and nothing will appear.

Code:

    <script type="text/javascript">
        $( document ).ready( function() {
            $('.searchFunction').keyup( function( event ) {
                var search_term = $(this).attr('value');

        });
    </script>

Again, I am not really sure how to fix this. My database is called ing and the name of the field is ingName.

@Nevershow2016 your code is running. Check your console. I just verified it. Something wrong with your query. — Fakhruddin Ujjainwala
– Fakhruddin Ujjainwala, Commented Feb 29, 2016 at 17:37
Try to catch error using mysql_error($con) after your query — AliN11
– AliN11, Commented Feb 29, 2016 at 17:48

Fakhruddin Ujjainwala · Accepted Answer · 2016-02-29 18:15:58Z

2

Got it: you were not getting text box value here var search_term = $(this).val();

The OP was trying to read the value of the text box using var search_term = $(this).attr('value');

There was issue in your select query, I have updated it.

Update 1:

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' )
    {
        $conn=mysql_connect("localhost","root","") or die ("could not connect");
        mysql_select_db("test") or die ("could not find db");

        if ( !empty( $_POST['search_term'] ) ) 
        {

            $search_term =  $_POST['search_term'] ;

           $query = mysql_query( "SELECT `ingName` FROM `ing` WHERE `ingName` LIKE '".$search_term.'%', $conn );


            if( $query )
            {
                while( $row = mysql_fetch_assoc( $query ) ) 
                {
                    echo '<li>'.$row['ingName'].'</li>';
                }
            }
        }
        mysql_close( $conn );
        exit();
    }
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Dashboard</title>
  </head>
  <body>

    <div class="container">
        <input type="text" name='search_term' class="searchFunction">
        <input type="submit" value="Search">
        <div class="dropdown">
            <ul class="result"></ul>
        </div>
    </div>

    <script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        $( document ).ready( function() {
            $('.searchFunction').keyup( function( event ) {
                var search_term = $(this).val();

                $.post( document.location.href, { search_term:search_term }, function( data ) {
                    $('.result').html( data );

                    $('.result li').click( function( event ) {
                        var result_value = $(this).text();

                        $('.searchFunction').attr('value', result_value );
                        $('.result').html('');
                    });
                });
            });
        });
    </script>

  </body>

edited Feb 29, 2016 at 18:15

answered Feb 29, 2016 at 17:39

Fakhruddin Ujjainwala

2,55919 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

Nana Partykar Over a year ago

Can you please explain what changes you made here ?

Xorifelse Over a year ago

You're trying to read an attribute in the element while instead you want the value var search_term = $(this).val();

Nevershow2016 Over a year ago

tRIED this is well and still nothing

Fakhruddin Ujjainwala Over a year ago

@Nevershow2016 check my updated code. Let me know if it works.

Nevershow2016 Over a year ago

Howeer it did not add to the box again i am not sure why

|

Andrew Myers · Accepted Answer · 2016-02-29 19:39:40Z

1

Run your query in the MySQL command line, and try to get results. Do you get a response?

Next point: you use wrong concatenation. I mean, change this

,$row['ingName'],

to this

. $row['ingName'] .

edited Feb 29, 2016 at 19:39

Andrew Myers

2,7865 gold badges36 silver badges42 bronze badges

answered Feb 29, 2016 at 17:40

Andrew Z

1394 bronze badges

3 Comments

Nana Partykar Over a year ago

This may be one of the reason. Good Catch

Nevershow2016 Over a year ago

Were should this go>?

Andrew Z Over a year ago

echo '<li>',$row['ingName'],'</li>'; to echo '<li>'.$row['ingName'].'</li>';

Andrew Myers · Accepted Answer · 2016-02-29 19:43:44Z

0

Select your textbox by id or class. Here I am doing it using id, getting the value of the textbox when a key is pressed, and passing the entered value in ajax code.

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' )
    {
        $conn=mysql_connect("localhost","root","") or die ("could not connect");
        mysql_select_db("test") or die ("could not find db");

        if ( !empty( $_POST['search_term'] ) ) 
        {

            $search_term = mysql_real_escape_string( $_POST['search_term'] );

            $query = mysql_query( "SELECT `ingName` FROM `ing` WHERE `ingName` LIKE '$search_term%'", $conn );


            if( $query )
            {
                while( $row = mysql_fetch_assoc( $query ) ) 
                {
                    echo '<li>'.$row['ingName'].'</li>';
                }
            }
        }
        mysql_close( $conn );
        exit();
    }
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Dashboard</title>
  </head>
  <body>

    <div class="container">
        <input type="text" name='search_term' id="search_term" class="searchFunction">
        <input type="submit" value="Search">
        <div class="dropdown">
            <ul class="result"></ul>
        </div>
    </div>

    <script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        $( document ).ready( function() 
        {
            $('.searchFunction').keyup( function( event ) 
            {
                var search_term = $("#search_term").val();

                $.post( document.location.href, { search_term:search_term }, function( data ) 
                {
                    $('.result').html( data );

                    $('.result li').click( function( event ) 
                    {
                        var result_value = $(this).text();
                        $('.searchFunction').attr('value', result_value );
                        $('.result').html('');
                    });
                });
            });
        });
    </script>
  </body>
</html>

edited Feb 29, 2016 at 19:43

Andrew Myers

2,7865 gold badges36 silver badges42 bronze badges

answered Feb 29, 2016 at 17:56

Paresh Gami

4,7926 gold badges28 silver badges44 bronze badges

4 Comments

Nana Partykar Over a year ago

An Explanation To This Answer Will Be More Useful. What Changes You Did In Code & Why It Will Work. Don't Simply Write "Try This Example".

Nevershow2016 Over a year ago

This is great it actually worked perfectly, but yes, what changes were made , jut so i know

Nevershow2016 Over a year ago

@PareshGami there is only 1 thing wrong, when u click on it, it does not appear in the box

Nevershow2016 Over a year ago

So it will become a drop down box and its there but when i click on it , it should show up in the search box

Collectives™ on Stack Overflow

PHP search function not displaying results

3 Answers 3

16 Comments

3 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

16 Comments

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related