Codeigniter + JQuery 1.4.2 + autocomplete

[eluser]nir1978[/eluser]
Helllo friends,

I am creating an application for registering appointments (later will send through sms as reminder)

using codeigniter and after a long seach found that with JQuery we can do the auto complete...

my page contains a form with recipient (from mysql) I want to use multiple values....I tried using the jquery from the examples but none work....

I guess I am not doing right. (Jquery demo works perfect and if I add the source as php file or codeigniter controller/method it ruins)

can someone post a sample of such autocomplete.

[eluser]kkristo[/eluser]
My autocomplete

Code:

$("#ToUser").autocomplete({
    source: function(request, response) {
            $.ajax({
                    url: "<?= base_url();?>search/User",
                    dataType: "json",
                    type: "post",
                    data: {
                            maxRows: 15,
                            term: request.term,
                            state: $('#ToUser').val()
                    },
                    success: function(data) {
                            response($.map(data.tags, function(item) {
                                    return {
                                            label: item.Name,
                                            value: item.Name,
                                            mytest: item.UserID
                                    }
                            }))
                    }
            })
    },
    minLength: 2,
    select: function(event, ui) {
            $("#ToUserID").val(ui.item.mytest) ;

    }

});

and form view i have <input type="text" name="ToUser" value="" id="ToUser" />
and controller/model

Code:

function User(){
            $term = $this->input->post('term');
            $this->db->select('UserID, Name');
            $this->db->like('Name', $term);
            $term = $this->db->get('User')->result_array();
            sleep(2);
            echo '{"tags":'. json_encode($term) .'}';

        }

[eluser]nir1978[/eluser]
I checked your code and put same in mine changing where required but still no luck.

my view:

[removed]
$("#recipient").autocomplete({
source: function(request, response) {
$.ajax({
url: "<?= base_url();?>appointments/search",
dataType: "json",
type: "post",
data: {
maxRows: 15,
term: request.term,
state: $('#recipient').val()
},
success: function(data) {
response($.map(data.tags, function(item) {
return {
label: item.Name,
value: item.Name,
mytest: item.pid
}
}))
}
})
},
minLength: 2,
select: function(event, ui) {
$("#recipient").val(ui.item.mytest) ;

}

});
[removed]

<div id="content">
<h1>&lt;?php echo $pagetitle;?&gt;</h1>
&lt;?php

echo form_open('appointments/update');
echo form_label('Send date','senddate');
echo form_input('senddate',isset($values['senddate']) ? $values['senddate']:"");
echo form_label('Reminder','reminder');
echo form_input('reminder',isset($values['reminder']) ? $values['reminder']:"");
echo '(minutes)';
echo br(1);
echo form_label('Recipients','recipient');
//echo form_input('recipient',isset($values['recipients']) ? $values['recipients']:"");
?&gt;
<div class="demo">

<div class="ui-widget">
&lt;input type=text id=recipient&gt;
</div>
</div>
&lt;?php
echo br(1);
echo form_label('Details','message');
echo form_textarea('message',isset($values['message']) ? $values['message']:"");
echo br(1);
echo form_submit('submit','Save');
echo form_close();

?&gt;

</div>

&lt;?php print_r($recipients);?&gt;

My Controller:

function search() {

$term = $this->appointment_model->search($this->input->post('term'))->result_array();
echo '{"tags":'.json_encode($term).'}';

}

My Model:

function search($q) {
$this->db1->select('pid,firstname');
$this->db1->like('firstname',$q);
return $this->db1->get('phonebook');
}

no luck at all

also I checked the URL directly (appointments/search) I get

{"tags":[{"pid":"1","firstname":"Niranjan"},{"pid":"2","firstname":"hello"},{"pid":"3","firstname":"dis"}]}

means I am able to receive the output from the controller...but my javascript in the view file is not able to understand.

I loaded jquery-1.4.2.js jquery.ui.autocomplete.js and other required js files.

please let me know whats wrong


EDIT:
my header :

jquery-1.4.2.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.position.js
jquery.ui.autocomplete.js

[eluser]kkristo[/eluser]
success: function(data) {
response($.map(data.tags, function(item) {
return {
label: item.Name,
value: item.Name,
mytest: item.pid
}

change

return {
label: item.firstname,
value: item.firstname,
mytest: item.pid
}


Hope this help.

[eluser]nir1978[/eluser]
already done that....

no luck

[eluser]techgnome[/eluser]
javascript runs on the client and exists as it is... it's not served up by php (unless you create a php page that in returns serves up the js) ... which means this line: url: "&lt;?= base_url();?&gt;search/User", won't run as you think it might... you end up with javascript on the client with that line literally exactly like that... it won't have the base_url showing in it. I suspect that's where the issue lies.


So.. how to get base_url() to run right? Not sure.. I'd probably would create an ajax controller, with views that serve up the js... then in the script tag, instead of pointing to a js file directly, reference it using the CI controller/view format, for which you could probably use the anchor tag. ... Now that I think about it, that might solve a problem I think I'm having. Anyways, since the view is in php, then the base url function should then operate and be replaced with the appropriate url in your js that gets served up to the client.

-tg

[eluser]nir1978[/eluser]
The JS is getting the url (view source shows).....but still no luck with the autocomplete....

please experts advice needed

[eluser]Enorog[/eluser]
First of all, fix your JS, you cannot use php tags.

Create a JS variable (before you load the autocomplete code), you can do it in the view like this (I put spaces in the script tag because of forum security):

Code:

<!-- FIRST, CREATE A JS VARIABLE TO STORE base_url -->
< script type="text/javascript">
    ci_base_url = '<?php echo base_url() ?>';
</ script>
<!-- SECOND, LOAD YOUR AUTOCOMPLETE JS -->
< script type="text/javascript" src="<?php echo base_url() ?>js/autocomplete.js"></ script>

Then your JS code will look like:

Code:

$("#ToUser").autocomplete({
    source: function(request, response) {
            $.ajax({
                    url: ci_base_url + "search/User",
                    ...

Now run your javascript and look at Firebug's "Net" tab. Look at your request to the server and what the server returns as result. Post this data here if you're still having trouble.

If the autocomplete is not firing any request to the server (to search/User in your case), look at the "Console" tab for JS errors.

[eluser]Nurdin Bekkeldiev[/eluser]
Hi all, I have strange error which I could not solve. The function itself works fine, when I call it by jQuery autocomplete, it doesn't work. In the model I got the list of news titles and then I explode titles in order to list only the words which contain the string that I was searching. Can you help me please.

When I remove this line

Code:

if (strlen(strpos($exs[$t],$terms)) > 0) {

I got the list of the words within the title. But I need only the words which contain only the string that I was searching.

Code:

function search() {
        $return_arr = array();
        //
        $return_arr['response'] = 'false'; //Set default response
        $terms = $this->input->post('search');
        $result = $this->news_model->getManyResult(array('keyword' => $terms));
        if ($result)
        {
            $return_arr['response'] = 'true'; //Set response
            $return_arr['message'] = array(); //Create array
            foreach ($result as $row) :
                $exs = explode(" ", $row->title);
                    for ($t = 0; $t < count($exs); $t++) {
                        if (strlen(strpos($exs[$t],$terms)) > 0) {
                            $return_arr['message'][] = array('label'=> $exs[$t], 'value'=> $exs[$t]); //Add a row to array
                        }
                    }
            endforeach;
        }
        echo json_encode($return_arr);

    }

[eluser]Kyle Ellman[/eluser]
If anyone is having trouble using the ajax callback method of the autocomplete, I've found an easier way of using JQuery UI Autocompleter with CI.

Since most of us leave $_GET disabled (default in CI), we have to use another method of passing the search term to the function. Just use a URI segment to do that like this:

Code:

//this could be a function in a "search" controller

function autocomplete()
    {
        echo json_encode($this->search_model->search($this->uri->segment(3)));
    }

And since the source url has to change each time the autocompleter requests that function, add this event to the options:

Code:

$( "#search_box" ).autocomplete({
                source: '<?=base_url()?>searchcontroller/autocomplete',
                search: function(event, ui)
                {
                    $("#search_box").autocomplete("option", "source", '<?=base_url()?>searchcontroller/autocomplete/'+$("#search_box").val());
                }
            });

And as long as the function in the model returns an array of results, you should be good to go.