>
Autosuggestion Implementation using Jquery in cake...
Welcome, Guest

by vineet on Tuesday, 09 December 2008
Autosuggestion Implementation using Jquery in cakephp


Hi,

For implementing autosuggestion in your application it requires
1.jquery-1.2.1.pack.js

2.upArrow.png

in thtml file

Please put this bunch of code

 <script type="text/javascript" src="/jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
    function lookup(inputString) {
        if(inputString.length == 0) {
            // Hide the suggestion box.
            $('#suggestions').hide();
        } else {
            $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
                if(data.length >0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    } // lookup
    
    function fill(thisValue) {
        $('#inputString').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }
</script>

<style type="text/css">
    body {
        font-family: Helvetica;
        font-size: 11px;
        color: #000;
    }
    
    h3 {
        margin: 0px;
        padding: 0px;    
    }

    .suggestionsBox {
        position: relative;
        left: 30px;
        margin: 10px 0px 0px 0px;
        width: 200px;
        background-color: #212427;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border: 2px solid #000;    
        color: #fff;
    }
    
    .suggestionList {
        margin: 0px;
        padding: 0px;
    }
    
    .suggestionList li {
        
        margin: 0px 0px 3px 0px;
        padding: 3px;
        cursor: pointer;
    }
    
    .suggestionList li:hover {
        background-color: #659CD8;
    }
</style>

<div>
        <form>
            <div>
                Type your county:
                <br />
                <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
            </div>
           
            <div class="suggestionsBox" id="suggestions" style="display: none;">
                <img src="/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                <div class="suggestionList" id="autoSuggestionsList">
                     
                </div>
            </div>
        </form>
    </div>

in controller

 function yourfunction()

{

////////////your code

 if(isset($_POST['queryString']))
        {
            
            $queryString = $_POST['queryString'];
            
            if(strlen($queryString) >0)
            {
                
                $queryResult = $this->User->query("SELECT u_school_studied FROM user WHERE u_school_studied LIKE '$queryString%' LIMIT 10");
                ///print_r($queryResult);die;
                for($i=0;$i<count($queryResult);$i++)
                {
                echo '<li onClick="fill(''.$queryResult[$i]['user']['u_school_studied'].'');">'.$queryResult[$i]['user']['u_school_studied'].'</li>';
                }
            }die;    
   ///////Your code            
            
    }

 

}

 

 

in simple php

<?php
    $db = new mysqli('localhost', 'USERNAME' ,'PASSWORD', 'DATABASE');
    if(!$db) {
        echo 'ERROR: Could not connect to the database.';
    } else {
            if(isset($_POST['queryString'])) {
            $queryString = $db->real_escape_string($_POST['queryString']);
            if(strlen($queryString) >0) {
                   
                $query = $db->query("SELECT your_column FROM your_db_table WHERE your_column LIKE '$queryString%' LIMIT 10");
                if($query) {
                        while ($result = $query ->fetch_object()) {
                                      echo '<li onClick="fill(''.$result->value.'');">'.$result->value.'</li>';
                     }
                } else {
                    echo 'ERROR: There was a problem with the query.';
                }
            } else {
               
            }
        } else {
            echo 'There should be no direct access to this script!';
        }
    }
?>


 



Blogger Image
My Blog Title

Product Engineering, software engineering company, Product Development, Product Migration, Product Re-engineering, Product Maintenance, Product Testing Commercial Application Development, Business Software development, commercial software for startups, Application Support and Maintenance, software testing Product Maintenance, Outsource product maintenance, product support and maintenance Product Migration, Product Re-engineering, product re-engineering services Product Research, Product Engineering, UI Prototyping Services Software Testing Services, Quality Assurance services, professional software testers, Load Testing, Functional Testing, Cross Platform, Browser Testing, Test Automation, Testing Tools, software quality analysis Functional Testing Services, software quality analysis, Software Testing Services, Application Testing Services, Functional Testing Types Automated Testing, Automated Testing Services, automation testing, test script development, Automation Test Tools, outsource automation testing Load Testing, Performance Testing Services, Load Testing Tools Offshore Software Development, Outsource software services, offshore outsourcing services, offshore software development services, IT outsourcing services, software quality assurance services, Offshore IT services, Custom Application Development Services, Offshore Product Engineering Benefits of IT Outsourcing, Offshore Software Development companies, offshore software development firms Outsource planning, IT outsourcing, IT development services, offshore IT companies, offshore software development Offshore Software Development, Outsource software services, offshore outsourcing services, offshore software development services, IT outsourcing services, software quality assurance services, Offshore IT services, Custom Application Development Services, Offshore Product Engineering Offshore Software Development, Outsource software services, offshore outsourcing services, offshore software development services, IT outsourcing services, software quality assurance services, Offshore IT services, Custom Application Development Services, Offshore Product Engineering