• Suggestion-box using php and jquery

    For Suggestion-box using php and jquery you have to go through the steps which are described below.

    Step 1 : First you have to create config.php file and copy code of that file from below and then configure your database in this file.
    Step 2 : Now you have to create index.php file and copy code of that file from below.
    Step 3 : Now you have to create process.php file and copy code of that file from below.
    Step 4 : Now you have to create suggestion.js file and copy code of that file from below.
    Step 5 : Now you have to create style.css file and copy code of that file from below.
    Step 6 : Now you have to download jquery.js file library of jquery from this url http://jquery.com/download/.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    
    Code :
     
    File : config.php
     
    <!--?php
    //params to edit
    $host="localhost";
    $user="root";
    $pass="";
    $db="suggestionbox_php";
    $table="countries"; //table name
    $column="country" ; //the column name which you want toshow up in relevant results
    $limit=10; // LIMIT for results
    //param to edit//
     
    $link=mysql_connect($host,$user,$pass);
    if(!$link){
    die("cound not connect ".mysql_error());
    }
    mysql_select_db($db,$link);
    ?-->File : index.php<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="suggestion.js">// <![CDATA[
     
    // ]]></script><!--?php $name = isset($_GET['name']) ? $_GET['name'] : "" ; ?-->

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    
    File : process.php
     
    <!--?php
    require_once('config.php');
    $names=array();
    ?-->
    <!--?php
    if(isset($_POST['name']))
    {
    $name=$_POST['name'];
    $sql="select * from $table where $column  LIKE '%$name%' LIMIT $limit ";
    $result=mysql_query($sql);
    while($row=mysql_fetch_array($result))
    {
        $names[]=$row[$column];
    }
    }
    ?-->
    <!--?php
    echo"
    <ul class='searchsugg' -->";
    foreach($names as $val)
     {
        echo '
    • ‘.$val.’
    1
    2
    3
    4
    5
    
    ';
    }
    if(empty($names))
    {
    echo '
    • No result
    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
    
     '; } echo" "; ?&gt; File : suggestion.js function suggestme(inputString,e)
    { //alert("hello"); if(e.keyCode==40 || e.keyCode==38)
    { return false; } if(inputString.length == 0)
    { $('#suggestme').fadeOut(); 
     } 
    else { $('#SearchBox').addClass('load'); 
    $.post("process.php", {"name": ""+inputString+""},
     function(data){ if(data.length &gt;0) 
     { $('#suggestme').fadeIn(); 
     $('#suggestmeList').html(data);
    $('#SearchBox').removeClass('load');
    $(document).ajaxStop(function(){ var chosen="";
    $("#SearchBox").keydown(function(e)
    { var list = $(this);
    if(e.keyCode==40){ if(chosen === "") { chosen = 0; }
    else if((chosen+1) &lt; $('.searchsugg li').length)
    { chosen++; } $('.searchsugg li').removeClass('active');
    $('.searchsugg li:eq('+chosen+')').addClass('active');
    $('#SearchBox').val($('.searchsugg li:eq('+chosen+')').text());
    return false; } else if(e.keyCode==38){ if(chosen === "") { chosen = 0; } else if(chosen &gt; 0) { chosen--; }
    $('.searchsugg li').removeClass('active');
    $('.searchsugg li:eq('+chosen+')').addClass('active');
    $('#SearchBox').val($('.searchsugg li:eq('+chosen+')').text());
    return false; } }); });
    } });
    }
    }
    function fillSearch(val) { //alert("hi");
    $("#SearchBox").val(val);
    $("#SearchForm").submit(); setTimeout("$('#suggestme').fadeOut();", 600); }
    $(document).ready(function(){ $("#SearchForm").mouseleave(function(){setTimeout("$('#suggestme').fadeOut();", 600);}); });
    File : style.css #SearchBox{width:450px;height:34px;padding:1px;font-size:15px;}
    .mainbutton{ float:left; margin:0 2px 0 2px;height:34px;display:block;background:#f4f4f4; border:1px solid #ececec;cursor:pointer;width:130px; font-size:15px;font-weight:bolder;text-transform:uppercase; }
    .mainbutton:hover { background:#06a1e1; color:#fff !important; text-decoration:none !important; }
    #SearchForm{padding:5px;display:block;}
    #SearchFieldContainer{position:relative;margin:100px auto 2px auto;}
    /*----------------main Suggestion Search-----------*/
    #wrapjsuggest{float:left;position:relative;height:450px;}
    div#mainSearch div#suggestme{position:absolute;z-index:1000;background:white;left:0px;top:33px;overflow:hidden;width:452px;border:1px solid #aaa;display:none;-webkit-box-shadow: rgba(0, 0, 0, 0.296875) 0px 2px 2px;box-shadow: rgba(0, 0, 0, 0.296875) 0px 2px 2px;} ul.searchsugg{width:100%;display:block;-webkit-box-shadow: rgba(0, 0, 0, 0.296875) 0px 2px 2px;box-shadow: rgba(0, 0, 0, 0.296875) 0px 2px 2px;padding:0px;margin-top:0px;}
    ul.searchsugg li{padding:5px;font-size:15px;color:#575757;cursor:pointer;list-style-type:none;margin:0px;}
    ul.searchsugg
    li:hover{background:#05a6ee;color:white;font-weight:bold;} ul.searchsugg
    li.active{background:#05a6ee;color:white;font-weight:bold;} .load{background:url("loader.gif") no-repeat right;}
    Tags:

Comments on this post

Leave a Reply

  • Security Code :


    8 − seven =