article

Wednesday, August 29, 2018

Create a Jquery/Ajax, php, mysql - style suggestion search

Create a Jquery/Ajax, php, mysql - Style suggestion search

Database table

CREATE TABLE IF NOT EXISTS `search` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`img` varchar(255) NOT NULL,
`desc` text NOT NULL,
`url` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a Jquery/Ajax, php, mysqli - Style suggestion search</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
function find(textboxString) {
    if(textboxString.length == 0) {
        $('#resultbox').fadeOut(); // Hide the resultbox box
    } else {
        $.post("ajaxsuggestdata.php", {queryString: ""+textboxString+""}, function(data) { // Do an AJAX call
            $('#resultbox').fadeIn(); // Show the resultbox box
            $('#resultbox').html(data); // Fill the resultbox box
        });
    }
    // Fade out the resultbox box when not active
     $("input").blur(function(){
        $('#resultbox').fadeOut();
     });
     // Safely inject CSS3 and give the search results a shadow
    var cssObj = { 'box-shadow' : '#888 5px 10px 10px', // Added when CSS3 is standard
        '-webkit-box-shadow' : '#888 5px 10px 10px', // Safari
        '-moz-box-shadow' : '#888 5px 10px 10px'}; // Firefox 3.5+
    $("#resultbox").css(cssObj);
}
</script>
</head>
<body>
<div style="margin-left:50px">
    <div><h2>What are you looking for?</h2></div>
    <form id="searchwrapper">
        <div>
            <input type="text" size="30" class="searchbox" value="" id="textboxString" onkeyup="find(this.value);" />
        </div>
        <div id="resultbox"></div>
    </form>
</div>
<style>
    body, div, img, p { padding:0; margin:0; }
    a img { border:0 }
    body { font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; }
    #searchwrapper {
        width:310px;
        height:40px;
        background-image:url(img/searchbox.jpg);
        background-repeat:no-repeat;
        padding:0px;
        margin:0px;
        position:relative;
    }
    #searchwrapper form { display:inline ; }
    .searchbox {
        border:0px;
        background-color:transparent;
        position:absolute;
        top:5px;
        left:9px;
        width:256px;
        height:28px;
        color:#FFFFFF;
    }
    #dbresults { border-width:1px; border-color:#919191; border-style:solid; width:310px;
        font-size:10px; margin-top:20px; -moz-box-shadow:0px 0px 3px #aaa;
        -webkit-box-shadow:0px 0px 3px #aaa;
        box-shadow:0px 0px 3px #aaa;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
        padding-top:42px;  
    }
    #dbresults a { display:block; background-color:#D8D6D6; clear:left; height:56px; text-decoration:none; }
    #dbresults a:hover { background-color:#b7b7b7; color:#ffffff; }
    #dbresults a img { float:left; padding:5px 10px; }
    #dbresults a span { color:#555555; }
    #dbresults a:hover span { color:#f1f1f1; }
</style>
</body>
</html>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//ajaxsuggestdata.php
<p id="dbresults">
<?php
    $db = new mysqli('localhost', 'root', '', 'testingdb');
    if(!$db) {
        echo 'ERROR: Could not connect to the database.';
    } else {
        // Is there a posted query string?
        if(isset($_POST['queryString'])) {
            $queryString = $db->real_escape_string($_POST['queryString']);
            // Is the string length greater than 0?
            if(strlen($queryString) >0) {
                $query = $db->query("SELECT * FROM searchs WHERE name LIKE '%" . $queryString . "%' ORDER BY name LIMIT 5");
                 
                if($query) {
                    while ($result = $query ->fetch_object()) {
                        echo '<a href="'.$result->url.'">';
                        echo '<img src="img/'.$result->img.'" alt="" />';
                        $description = $result->desc;
                        if(strlen($description) > 80) {
                            $description = substr($description, 0, 80) . "...";
                        }
                        echo '<span>'.$description.'</span></a>';
                    }
                } else {
                    echo 'ERROR: There was a problem with the query.';
                }
            }else {
                // Dont do anything.
            } // There is a queryString.
        }else {
            echo 'There should be no direct access to this script!';
        }
    }  
?>
</p>

Posted by ednalan at 6:40 AM . Under , .

Related Post