codeigniter - JQuery ui autocomplete not working with code igniter -
what want simple. want user able put in name , while inserting code igniter , jquery ui looks database , starts posting recommendations .. got far bit of here on stackoverflow .. still not working @ all.
the jquery ui command
$("#update-text").autocomplete({source:"<?php echo site_url('userprofile/autocomplete');?>",datatype:"json", type:'post'});
the form containing text field in php file
<div> <form method="post" action="#" name="updateplanform"> <div class="ui-widget"> <label for="update-text"></label> <input type="text" id="update-text" name="updatetext" value="what gonna today?" onclick="removetext()"/> </div> <input type="button" class="small green button" value="update plan" name="updateplanbutton"/> <!-- once clicked jquery sends post controller send_plan , jquery return view --> </form> </div>
and have controller called userprofile , in function called autocomplete
function autocomplete(){ // takes text field , whatever user writes autocompletes it. //every single place , event in database should displayed in view in format $req = $this->input->post('updatetext'); $arrresults = array('orange', 'apple', 'bannana'); $array = array_filter($arrresults, 'mycallback'); // filter array containing search word using call function function mycallback ($var) { global $req; if (preg_match('/^'.$req.'/', $var)) { return $var; } } $array1 = array(); // filter null array foreach ($array $arr => $val) { if(!empty($val)) { $array1[] = $val; } } //echo out json encoded array echo json_encode($array1); }
the below code added @andrew
<!-- styles --> <link rel="stylesheet" type="text/css" href="<?php echo base_url().''?>public/styles/general.css"/> <link rel="stylesheet" type="text/css" href="<?php echo base_url().''?>public/styles/homepage.css"/> <link rel="stylesheet" type="text/css" href="<?php echo base_url().''?>public/styles/css-buttons.css"/> <link rel="stylesheet" type="text/css" href="<?php echo base_url().''?>public/styles/colors.css"/> <link rel="stylesheet" type="text/css" href="<?php echo base_url().''?>public/plugin/jqui/css/south-street/jquery-ui-1.8.11.custom.css"/> <!-- scripts --> <script type="text/javascript" src="<?php echo base_url().''?>public/scripts/removetextclick.js"></script> <script type="text/javascript" src="<?php echo base_url().''?>public/scripts/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="<?php echo base_url().''?>public/plugin/jqui/js/jquery-ui-1.8.11.custom.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#abso").hide(); $("#close").hide(); $("#activity-feed").load("<?php echo site_url('userprofile/update_plan_feed');?>"); // if removed userprofile change here $("#places-feed").load("<?php echo site_url('userprofile/suggested_places_feed');?>"); // if removed userprofile change here $("#events-feed").load("<?php echo site_url('userprofile/suggested_events_feed');?>"); // if removed userprofile change here $("#list-friends-feed-link").click(function(){ //start click $("#abso").load("<?php echo site_url('userprofile/list_freinds');?>"); $("#abso").slidedown("600", function(){}); $("#close").slidedown("600", function(){}); }); //end click $("#list-pictures-feed-link").click(function(){ //start click $("#abso").load("<?php echo site_url('userprofile/pic_feed');?>"); $("#abso").slidedown("600", function(){}); $("#close").slidedown("600", function(){}); }); //end click $("#list-groups-feed-link").click(function(){ //start click $("#abso").load("<?php echo site_url('userprofile/list_groups');?>"); $("#abso").slidedown("600", function(){}); $("#close").slidedown("600", function(){}); }); //end click $("#notify").click(function(){ //start click $("#abso").load("<?php echo site_url('userprofile/list_notifications');?>"); $("#abso").slidedown("600", function(){}); $("#close").slidedown("600", function(){}); }); //end click $("#close").click(function(){ //start click $("#abso").slideup("600",function(){}); $("#close").slideup("600",function(){}); }); //end click $("#broadcast-button").click(function(){ $.post("<?php echo site_url('userprofile/send_broadcast'); ?>", $("#broadcast-form").serialize()); }); $("#update-text").autocomplete({source:"<?php echo site_url('userprofile/autocomplete');?>",datatype:"json", type:'post'}); }); </script>
you want change configuration setup auto complete correctly:
$("#update-text").autocomplete("<?php echo site_url('userprofile/autocomplete');?>", {datatype:"json", type:'post'});
edit: also, there isn't type option on current autocomplete plugin, not i'm aware of, causes issues ci's url filtering (as seen in code @ https://github.com/agarzola/jqueryautocompleteplugin/blob/master/jquery.autocomplete.js). might need modify autocomplete code let use post.
edit: appear using jquery ui implementation, not standalone. looking @ options described @ http://jqueryui.com/demos/autocomplete/ can not pass in datatype , type options @ top level: unsupported. also, should change codeigniter method (define mycallback before use it):
function autocomplete(){ // takes text field , whatever user writes autocompletes it. //every single place , event in database should displayed in view in format $req = $this->input->post('updatetext'); $arrresults = array('orange', 'apple', 'bannana'); function mycallback ($var) { global $req; if (preg_match('/^'.$req.'/', $var)) { return $var; } } $array = array_filter($arrresults, 'mycallback'); // filter array containing search word using call function $array1 = array(); // filter null array foreach ($array $arr => $val) { if(!empty($val)) { $array1[] = $val; } } //echo out json encoded array echo json_encode($array1); }
edit 2: use post requests, try this:
$("#update-text").autocomplete({ source: function( request, response ) { $.post( "<?php echo site_url('userprofile/autocomplete');?", { updatetext: split(request.term).pop(); }, response ); }});
also, if you're using firefox can use firebug make sure requests being fired.
Comments
Post a Comment