CODEWITHSUNDEEP
phpjqueryajaxcodeigniter
Catfish
Catfish

Reputation: 19294

Need help with jquery ui autocomplete

I'm trying to get the jquery ui autocomplete to work with a codeigniter project.

so far I have an input field <input type="text" id="text1"/>

and then in my script I have 

source: function(request, response) {
            $.post('autocompleteHandler', {mechanic: request.term}, function(data) {
            console.log('data.phpResp = '+data.phpResp);
            console.log('in post?');

            console.log('data = '+data.toSource);

            var realArray = $.makeArray(data);  // this line was needed to use the $.map function

            response($.map(realArray, function(item) {

                console.log('in map');

                return {
                    label: item.info,
                    value: item.info
                }

            }));


            }, 'json');
        },

In my codeigniter controller I have this function

function autocompleteHandler() {

    $input = $this->input->post('mechanic');

    $this->load->model('login_model');

    $results = $this->login_model->search_mechanic_criteria($input);

    $mechs= array();
    foreach($results as $result) {

        $mechs['info'] = $result['mechanic_name'];  

    }
}

I'm not getting this to work. anyone have any ideas of where I can begin to troubleshoot? I really have a hard time with the jquery ui documentation.

EDIT: I've changed my code a bit. Instead of returning json_encode, I needed to echo json_encode on the php side of things. I still don't have anything showing up in my console though.

2ND EDIT Now my question is, how can I return multiple values for the autocomplete function? If i have a query that returns, just one row, it works fine, but if I have multiple rows returned, doesn't work. It's gotta be something with the way i'm returning the data, but I can't figure it out.

Upvotes: 0

Views: 229

Answers (2)

CodeReaper
CodeReaper

Reputation: 6145

I have been playing around with jsfiddle after you mentioned toSource(). See http://jsfiddle.net/XYMGT/. I find that the map function does not return jQuery, but the new array.

OLD STUFF:

I suspect that the $.map function does not return the array, but jQuery. Maybe it would to do this:

            // also you could inspect the data if the server returns what you think it returns:
            console.log(data);

            // first map the array
            $.map(data, function(item) {

                console.log('in response?');


                return {
                    label: 'testing',
                    value: 'test'
                }
            })
            // ...then separately do the response part
            response(data);

Lets us know if it makes a difference.

EDIT:

If this PHP code is still used:

function autocompleteHandler() {
  echo json_encode(array('phpResp' => 'something'));
}

Then console.log(data) should show the following in the console tab in FireBug:

{'phpResp':'somehting'}

Meaning that console.log(data.phpResp) should print 'something'. I am unsure where you are getting data.toSource from.

Upvotes: 1

Eonasdan
Eonasdan

Reputation: 7765

I would launch fiddler and see what it says it's returning. You can also go straight to your server side page in the browser that is serving the JSON results. I think the autocomplete automatically adds ?term to the string. url.aspx?term=|valueofText1|

$("#text1").autocomplete({
    source: url,
    minLength: 2,
    select: function (event, ui) {
        sou = ui.item.label;
    }
});

Upvotes: 0

Related Questions