【问题标题】:Dynamically autocomplete based on category基于类别动态自动完成
【发布时间】:2015-03-13 14:04:41
【问题描述】:

当我尝试使用基于组合框使用 codeigniter 创建具有动态值的自动完成时遇到问题, 我尝试过使用ajax,但没有成功。

这是我在分类中调用项目的 ajax 代码

<script type="text/javascript">
$(document).ready(function() {  
    $("#jenis").change(function(){              
        $.ajax({
            type : "POST",
            url: "<?php echo base_url(); ?>whz/admin/get_item",
            dataType: "html",
            data : "item=" + $("#jenis").val(),
            success: function(data)
            { 
                $("#showitem").text(data);  
            }
        });
    });
});
</script>

这是我的自动完成 jquery 代码

<div id="showitem">
    <script>
     $(function() {
        var availableTags = [
        <?php foreach ($item as $row){
                echo '"'.$row->item_name.'",';}?>
        ];
        $( "#autotags" ).autocomplete({
        source: availableTags
        });
     });
    </script>
</div>

这是我的控制器

public function get_item()
    {
        $this->load->model('whz_model');
        $category = $this->input->post('item');
        $item=$this->whz_model->get_item_by_cat($category);
        $script = '
          $(function() {
            var availableTags = [';
            foreach ($item as $row)
            {
                $script .= '"'.$row->item_name.'",';
            }

        $script .= '];
            $( "#autotags" ).autocomplete({
              source: availableTags
            });
          });';

        echo $script;
    }

我正在考虑使用 json 作为另一种选择,但我仍然没有足够的使用经验。

抱歉英语不好, 感谢您的帮助

【问题讨论】:

  • 你得到什么错误?
  • 你的意思是当你输入一些值时,它没有得到任何ajax响应?
  • @reza 我没有收到任何错误,我发送到视图的代码不起作用它只是显示代码,我尝试使用 $("#showitem").html(data); 但没有任何反应。
  • @RJAnoop 是的,它根本没有得到任何响应
  • @PrimaWinangun 我希望它也不会进入$("#jenis").change(function(){ 函数。 change 事件将在焦点离开该字段时起作用。您应该使用 keyup 事件而不是 change。只需检查您是否正确调用了该 ajax 调用

标签: php jquery ajax codeigniter autocomplete


【解决方案1】:

我已经用我在互联网上找到的另一种方法修复了它,它可能不是最好的,但它对我有用, 这是链接

http://www.danielrosca.ro/blog/en/codeigniter-autocomplete/

谢谢大家的回答

【讨论】:

    【解决方案2】:

    这仅基于文档,因为我手头没有任何可以尝试的系统。

    您告诉 jQuery,您的 AJAX 响应是 "html",这意味着您加载的 JavaScript 将永远不会被执行,我相信。如果您将数据加载为"script",它可能会起作用,但更好的方法确实是使用 JSON。

    您的 AJAX 调用将如下所示:

    <script type="text/javascript">
    $(document).ready(function() {  
        $("#jenis").change(function(){              
            $.ajax({
                type : "POST",
                url: "<?php echo base_url(); ?>whz/admin/get_item",
                dataType: "json",
                data : "item=" + $("#jenis").val(),
                success: function(data)
                { 
                    availableTags = data;
                }
            });
        });
    });
    </script>
    

    使用这样的控制器:

    public function get_item()
    {
        $this->load->model('whz_model');
        $category = $this->input->post('item');
        $item=$this->whz_model->get_item_by_cat($category);
    
        $this->output
            ->set_content_type('application/json')
            ->set_output(json_encode($item)));
    }
    

    您必须在全局范围内公开变量 availableTags 才能使其工作,您可以通过将 DOM 更改为来实现

    <div id="showitem">
        <script>
         $(function() {
            availableTags = [
            <?php foreach ($item as $row){
                    echo '"'.$row->item_name.'",';}?>
            ];
            $( "#autotags" ).autocomplete({
            source: availableTags
            });
         });
        </script>
    </div>
    

    您可能还想将其公开为window.availableTags,以便您可以在浏览器的控制台中检查它的值。

    如开头所述,我没有对此进行测试,但我相信它应该可以工作。

    【讨论】:

    • 我已经尝试了你的代码但仍然无法正常工作,自动完成脚本仍然显示我第一次加载页面时设置的默认项目
    • 您是否尝试过使用 window.availableTags = availableTags 公开变量并在 AJAX 调用后检查其值?另外,AJAX 调用是否获得了您期望的 JSON? (只需在浏览器的开发者工具中查看请求即可)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-05-14
    • 1970-01-01
    • 1970-01-01
    • 2020-05-01
    • 2013-01-18
    • 2019-02-09
    • 1970-01-01
    相关资源
    最近更新 更多