Question

我想做的很简单。我希望用户能够输入一个名称，同时插入代码点火器和JQuery ui查找数据库并开始发布推荐..所以这是我到目前为止得到的一些帮助来自stackoverflow的人...但它仍然无法正常工作。

Jquery ui命令

$("#update-text").autocomplete({source:"<?php echo site_url('userProfile/autocomplete');?>",dataType:"json", type:'POST'});

包含php文件中的文本字段的表单

<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 are you gonna do today?" onclick="removeText()"/>
</div>
<input type="button" class="small green button" value="Update Plan" name="updatePlanButton"/> <!-- once clicked JQuery sends a post to a controller send_plan and jquery will return the view -->
</form>
</div>

最后我有一个名为userProfile的控制器，其中有一个名为autocomplete的函数

function autocomplete(){
    // this takes the text field and whatever the user writes it autocompletes it.
    //Every single place and event in the database should be displayed in this view in this format
    $req = $this->input->post('updateText');

  $arrResults = array('orange', 'apple', 'bannana');

  $array = array_filter($arrResults, 'mycallback');
  // filter the array containing search word using call back function

  function mycallback ($var) {
    global $req;

    if (preg_match('/^'.$req.'/', $var)) {
      return $var;
    }
  }

  $array1 = array();

  // filter null array
  foreach ($array as $arr => $val) {
    if(!empty($val)) {
      $array1[] = $val;
    }
  }

  //echo out the json encoded array
  echo json_encode($array1);




    }

为@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 from userProfile then change here too
    $("#places-feed").load("<?php echo site_url('userProfile/suggested_places_feed');?>"); // if removed from userProfile then change here too
    $("#events-feed").load("<?php echo site_url('userProfile/suggested_events_feed');?>"); // if removed from userProfile then change here too




    $("#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>

Answer 1

您想要更改配置以正确设置自动完成：

$("#update-text").autocomplete("<?php echo site_url('userProfile/autocomplete');?>", {dataType:"json", type:'POST'});

编辑：此外，当前自动完成插件上没有类型选项，而不是我所知道的，这会导致CI的url get过滤出现问题（如代码中所示） https://github.com/agarzola/jQueryAutocompletePlugin/blob/master/jquery.autocomplete.js）。您可能需要修改自动完成代码才能使用POST。

编辑：您似乎使用的是jQuery UI实现，而不是独立的实现。查看http://jqueryui.com/demos/autocomplete/中描述的选项，您无法在顶层传递 dataType 和类型选项：这些选项不受支持。此外，您应该将codeigniter方法更改为这样（在使用之前定义 mycallback ）：

  function autocomplete(){
    // this takes the text field and whatever the user writes it autocompletes it.
    //Every single place and event in the database should be displayed in this view in this 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 the array containing search word using call back function

  $array1 = array();

  // filter null array
  foreach ($array as $arr => $val) {
    if(!empty($val)) {
      $array1[] = $val;
    }
  }

  //echo out the json encoded array
  echo json_encode($array1);
}

编辑2：为你的请求使用POST，试试这个：

$("#update-text").autocomplete({ source: function( request, response ) {
                    $.post( "<?php echo site_url('userProfile/autocomplete');?", {
                        updateText: split(request.term).pop();
                    }, response );
                }});

此外，如果您使用的是Firefox，则可以使用Firebug来确保触发请求。

JQuery ui自动完成不使用代码点火器

1 个答案: