CodeIgniter Forums
[solved]post in jquery ui's autocomplete - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: [solved]post in jquery ui's autocomplete (/showthread.php?tid=34081)

[solved]post in jquery ui's autocomplete - El Forum - 09-17-2010

[eluser]bobbob[/eluser]
I am trying to use the autocomplete plugin from jquery ui but it doesn't have an option to post. It defaults to get which doesn't work with my CI app.
Anyone found a way to get this to post?

[solved]post in jquery ui's autocomplete - El Forum - 09-18-2010

[eluser]kkristo[/eluser]
You can use autocomplete success event, or select event. Then you can add somthing like this:

$.ajax({
type: "post",
url: "/add/",
data: $('#myform').serialize() ,
success: function(msg){
},
error: function (data){
jAlert('<span>' + data.responseText + '</span>');

}
});

[solved]post in jquery ui's autocomplete - El Forum - 09-18-2010

[eluser]bobbob[/eluser]
Using the example at jquery which is like this:

Code:
$( "#birds" ).autocomplete({
            source: "search.php",
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.value + " aka " + ui.item.id :
                    "Nothing selected, input was " + this.value );
            }
        });

Where do I add you code to that? I am faily sure I can do it using the $.Ajax method myself but I am just wondering if anyone has used the plugin as is with a small tweak.
I put a php file in my root and did a file_get_contents() to my controller. It works but isn't ideal.

[solved]post in jquery ui's autocomplete - El Forum - 09-20-2010

[eluser]bobbob[/eluser]
In case anyone needs the solution here it is:

Code:
$(function() {
         $( "#tags" ).autocomplete({
            source: function(request, response) {
                $.ajax({
                  url: "&lt;?php echo site_url('controller/getQuoteArray'); ?&gt;",
                  data: { term: $("#tags").val()},
                  dataType: "json",
                  type: "POST",
                  success: function(data){
                  response(data);
                  }
                });
              },
            minLength: 3
        });
    });
And of course you need to include ui js and css files.
Great plugin!!

[solved]post in jquery ui's autocomplete - El Forum - 10-25-2010

[eluser]zrowcrypt[/eluser]
Tried doing that but not working Sad. Please help.





Working GET version:
====================

//define callback to format results


source: function(req, add){

pass request to server
$.getJSON("http://www.authorsite.com/demos/friends.php?callback=?", req, function(data) {
//create array for response objects
var suggestions = [];

//process response
$.each(data, function(i, val){
suggestions.push(val.name);
});

//pass array to callback
add(suggestions);
});
},

NOT WORKING my POST equivalent
=================================

source: function(req, add)
{
$.ajax({
url: '&lt;?php echo site_url('ajax/mylist');?&gt;',
dataType: 'json',
type: 'POST',
data: req,
success: function(data)
{
if(data.response =='true')
{
var suggestion = [];
$.each(data, function(i, val){ suggestions.push(val.name); });
add(suggestions);
}
}
})
},

[solved]post in jquery ui's autocomplete - El Forum - 10-25-2010

[eluser]danmontgomery[/eluser]
What does "not working" mean? Use firebug and/or firefox's javascript console to debug errors.

[solved]post in jquery ui's autocomplete - El Forum - 10-25-2010

[eluser]bobbob[/eluser]
Try using my example as it is. Get the search value with .val() on the input element. My case the #tags.
In your controller make sure you are returning your results using json_encode().
I have an array being encoded.

[solved]post in jquery ui's autocomplete - El Forum - 10-25-2010

[eluser]zrowcrypt[/eluser]
Thanks. Got it working. I'm new to JQuery so even simple things take some time to understand Smile.

I have got the first part done..which is the normal basic autocomplete POST implementation but what I am trying to achieve seems still too far Sad.

1. Autocomplete calls a php file which sends back a list of names along with their id as JSON stream.(Completed)
2. Now instead of a db query everytime, I want to cache the whole list(in a session may be) after the model returns it once in the beginning and let autocomplete search this cached array everytime.

3. I want this list to be like mini html forms in a div ( rows of NAME / ADD button). When ADD button besides user's friend's name is clicked , the friends id(corresponding to name already in cache) should somehow get stored in an array/hidden variable. This list of added ids can then be sent back to DB finally to store at the end of this whole process.

Spent whole day today trying to learn in bits n pieces and googling if anyone has done something similar which I am sure many must have as its a common search and add item from list via autocomplete feature. No success yet. Can you provide me some direction?

Thanks.

[solved]post in jquery ui's autocomplete - El Forum - 10-25-2010

[eluser]zrowcrypt[/eluser]
OK I found something Smile. Now I have to try to understand what is it doing....I mean 'How' Smile.

http://www.petefreitag.com/item/756.cfm


$('input.employeeAutocomplete').each(function() {
var autoCompelteElement = this;
var formElementName = $(this).attr('name');
var hiddenElementID = formElementName + '_autocomplete_hidden';
/* change name of orig input */
$(this).attr('name', formElementName + '_autocomplete_label');
/* create new hidden input with name of orig input */
$(this).after("&lt;input type=\"hidden\" name=\"" + formElementName + "\" id=\"" + hiddenElementID + "\" /&gt;");
$(this).autocomplete({source:'employee-search-json.cfm',
select: function(event, ui) {
var selectedObj = ui.item;
$(autoCompelteElement).val(selectedObj.label);
$('#'+hiddenElementID).val(selectedObj.value);
return false;
}
});
});

[solved]post in jquery ui's autocomplete - El Forum - 11-08-2010

[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);

    }