Auto Suggest

This page demonstrates the auto suggest using xajax. This example was inspired by Ajax Suggest Tutorial and the data of U.S. states came from Wikipedia of U.S. States.

Please enter U.S. state:

Model: us_state_model.php

<?php
class us_state_model extends Model 
{
    function us_state_model()
    {
        parent::Model();
    }

    function search_us_states($state)
    {
        $query = $this->db->query("select * from us_state where name like '" . addslashes($state) . "%' order by name");

        return ($query);
    }
}
?>


Controller: autosuggest.php

<?php
class autosuggest extends Controller
{
    function autosuggest()
    {
        parent::Controller();

        $this->load->model('us_state_model', 'us_state_model', true);
    }

    function index()
    {
        // XAJAX
        $this->load->library('xajax');
        $this->xajax->registerFunction(array("auto_suggest", &$this, "auto_suggest"));
        $this->xajax->processRequests();
        $data['xajax_js'] = $this->xajax->getJavascript(null, '/js/xajax.js');

        // load views
        $data['head_title'] = WEBSITE_NAME . " - Examples: Auto Suggest";
        $data['highlighted_controller'] = highlight_file("autosuggest.php", TRUE);

        // load example MVC
        $example = new example('autosuggest', true);
        $data['highlighted_model'] = $example->model;
        $data['highlighted_view'] = $example->view;

        $data['subheader'] = $this->load->view('examples_subheader', $data, true);
        $data['sidebar'] = $this->load->view('examples_sidebar', $data, true);
        $data['body_content'] = $this->load->view('autosuggest_tpl', $data, true);        
        $this->load->view('site_layout', $data);
    }

    function auto_suggest($state)
    {
        $objResponse = new xajaxResponse();

        $result = "";

        if (isset($state) && $state != "")
        {
            $query = $this->us_state_model->search_us_states($state);

            if ($query->row() > 0)
            {
                foreach ($query->result() as $row)
                {
                    $result .= "<div title='". $row->name . "' onmouseover='javascript:suggest_over(this);'";
                    $result .= " onmouseout='javascript:suggest_out(this);'";
                    $result .= " onclick='javascript:set_search(this.title);' class='suggest_link'>";
                    $result .= "<table border='0' width='170'><tr><td width='115'><b>" . $row->name . "</b></td><td>";
                    $result .= "<img src='" . $row->flag . "' width='45' height='24' alt='" . $row->name . "' />";
                    $result .= "</td></tr></table></div>";
                }

                $objResponse->addAssign("txt_result", "style.display", 'block');
                $objResponse->addAssign("txt_result", "innerHTML", $result);
            }
            else 
            {
                $objResponse->addAssign("txt_result", "style.display", 'none');
            }
        }
        else 
        {
            $objResponse->addAssign("txt_result", "style.display", 'none');
        }

        return $objResponse;
    }
}
?>

View: autosuggest_tpl.php

<style type="text/css" media="screen">
    .suggest_link {
        background-color: #FFFFFF;
        padding: 2px 6px 2px 6px;
    }
    .suggest_link_over {
        color: white;
        background-color: rgb(100,135,220);
        padding: 2px 6px 2px 6px;
    }
    #txt_result {
        position: absolute;
        left: 336px;
        background-color: #FFFFFF; 
        text-align: left; 
        border: 1px solid #000000;    
        display: none;
    }        
</style>
<script type="text/javascript">
<!--
    xajax.loadingFunction = function(){xajax.$('loading_message').style.display='block';};
    xajax.doneLoadingFunction = function(){xajax.$('loading_message').style.display='none';};
// -->
</script>
<script type="text/javascript">
<!--
//Mouse over function
function suggest_over(div_value) 
{
    div_value.className = 'suggest_link_over';
}

//Mouse out function
function suggest_out(div_value) 
{
    div_value.className = 'suggest_link';
}

//Click function
function set_search(value) 
{
    document.getElementById('txt_search').value = value;
    document.getElementById('txt_result').innerHTML = '';
    document.getElementById('txt_result').style.display = 'none';
}

function auto_suggest()
{
    document.getElementById('txt_result').style.display = 'none';
    xajax_auto_suggest(escape(document.getElementById('txt_search').value));
}
// -->
</script>
<div id="loading_message" class="loadingMessage">Loading ...</div>
<h1 id="introduction">Auto Suggest</h1>
<p>
This page demonstrates the auto suggest using <?=XAJAX_LINK_POPUP?>. This example was inspired by <a href="http://www.dynamicajax.com/fr/AJAX_Suggest_Tutorial-271_290_312.html" target="_new">Ajax Suggest Tutorial</a> and the data of U.S. states came from <a href="http://en.wikipedia.org/wiki/U.S._state" target="_new">Wikipedia of U.S. States</a>.
</p>

<p>
Please enter U.S. state: <input type="text" id="txt_search" name="txt_search" autocomplete="off" onkeyup="auto_suggest()" />
</p>

<div id="txt_result"></div>

<h1 id="introduction">Model: us_state_model.php</h1>
<p>
<?=$highlighted_model?>
</p>

<h1 id="introduction">Controller: autosuggest.php</h1>
<p>
<?=$highlighted_controller?>
</p>

<h1 id="introduction">View: autosuggest_tpl.php</h1>
<p>
<?=$highlighted_view?>
</p>