Easy autocomplete Ajax..

[eluser]tnathos[/eluser]
If dont resolved easily an ajax autocomplete implementation .. I at least use some time to find a solution .. trying to use jquery plugins .. and others .. but i cant do.

Then find an example to make an autocomplete ajax in php.. and what I did was apply for CI.

Advantages! no additional plugin jquery!, customizable with css! easy integration whit CI, no problem whit browsers!!

Something I hope will serve as code...

View

Code:

[removed]
function lookup(inputString) {
        if(inputString.length == 0) {
            $('#suggestions').hide();
        } else {
            $.post("http://site/controller/autocomplete/", {queryString: ""+inputString+""}, function(data){
                if(data.length >0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    }
    
    function fill(thisValue) {
        $('#id_input').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }  
[removed]

you can add the css to the #suggestions, color, font, position etc etc etc...

Controller
I use de code \u00A0 for handled the blank spaces int the string... in JS

Code:

function autocomplete()
    {    
        $this->load->model('model','get_data');
        $query= $this->get_data->get_autocomplete();
        
        foreach($query->result() as $row):
        
        echo "<li>field) ."')>".$row->field."</li>";
    
        endforeach;    
    }

Model

Code:

function get_autocomplete()
    {
        $this->db->select('field');
        $this->db->like('field',$this->input->post('queryString'));
        return $this->db->get('table', 10);    
    }

cya!

[eluser]tnathos[/eluser]
Hi make a wiki page whit the complete explanation for the use...

http://codeigniter.com/wiki/Ajax_Autocomplete/

[eluser]Unknown[/eluser]
Good one.really helpful.Thanks.....

[eluser]mikepuerto[/eluser]
Hi!

I'm having trouble getting this to work... I don't have the best understanding of jQuery or ajax...

I used the exact code to try to get it working with no luck(with the exception of not using active record and writing my own query). Tried the following and it returns the first 10 rows from the table. This tells me that the input data is not being passed... also using print_r($_POST) shows that the value of "queryString" is "[queryString] => [object Object]"

Any help with be greatly appriciated!

Mike

Code:

$('#search-box').keyup(
    function lookup(inputString) {
        if(inputString.length == 0) {
        $('#suggestions').hide();
        } else {
        $.post("/ajax/autocomplete", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
            $('#suggestions').show();
            $('#autoSuggestionsList').html(data);
            }
        });
        }
        
        function fill(thisValue) {
            $('#id_input').val(thisValue);
            setTimeout("$('#suggestions').hide();", 200);
        }
    });

[eluser]tnathos[/eluser]
mmmm check the route.. in the example you need put http://..... you post only the controller and the funciont..

[eluser]mikepuerto[/eluser]
I ended up figuring it out... Made some changes though:

Code:

// Search term suggestions
        $('#search-box')
            .bind('keyup', function() {
                var inputString = $(this).val();
                if(inputString.length == 0) {
                    $('#search_suggestions').fadeOut('fast').slideUp('fast');
                } else {
                    // slash is for dwoo!
                    $.post("/ajax/search_terms_suggest", \{search_terms: ""+inputString+""},
                    function(data){
                        if(data.length > 0) {
                            $('#search_suggestions').fadeIn('fast').slideDown('fast');
                            $('#search_suggestions_list').html(data);
                        }
                    });
                }
             })
            
             .bind('blur', function() {
                $('#search_suggestions_list li').click(function() {
                    var selectedString = $(this).text();
                    $('#search-box').val(selectedString);
                    setTimeout("$('#search_suggestions').fadeOut('fast');", 200);
                })
             })