如何让用户从输入字段下方回显的值列表中选择单个值

时间:2017-04-21 08:38:12

标签: php jquery ajax codeigniter-3

我想从数据库中检索的值列表中选择一个值。问题是,当用户类型假设f,并且数据库中有2个或2个以上的值时,则在该字段上可以看到一个
标签。我该如何删除值之间显示的br。请帮忙。

控制器页面 - > admin_c.php

  public function get_values_c()
      {
        $e_name = $_REQUEST['ename'];

        $res = $this->admin_m->get_ename_m($e_name);

        if(sizeof($res)>0)
            echo implode("</br>",$res);

      }

模型页面 - &gt; admin_m.php

          public function get_ename_m($e_name)
      {
        $ename_value = [];

        if($e_name!="")
        {
            $sql = "select distinct ename from event where ename like '$e_name%'";
            $res = $this->db->query($sql);
            foreach($res->result_array() as $row)
            {
                $ename_value[] = $row['ename'];
            }
            return $ename_value;                    
        }
      }

查看页面 - &gt; edit_event.php

<div class="control-group" style="margin-bottom:10px;">

                  <label class="control-label" style="margin-left:-64px;">Event Name</label>

                  <div class="controls" style="margin-left:28%">

                    <input type="text" class="span11" placeholder="Event name" name="ename" id="ename" style="width:95% !important;margin-left: -28px !important;">


                    <span class="span11" id="show_ename"  style="display:none;width:95% !important;margin-left: -28px !important;background-color:white;font-size:15px;"></span>

                  </div>

                </div>

View页面中的Ajax代码:

$('#ename').keyup(function(){
            $.ajax({
                url:'<?php echo site_url()."/admin_c/get_values_c";?>',
                method:'post',
                data:{'ename':$(this).val()},
                success: function(res,res1){
                    $('#show_ename').show();
                    $('#show_ename').html('');
                    $('#show_ename').html(res);
                }
            });
        });

        $('#show_ename').click(function(){
            var ename_value = $(this).html();
            $('#ename').val(ename_value);
            $(this).html('');
            $(this).hide();
        });

附上此代码的工作以供参考:Working

1 个答案:

答案 0 :(得分:0)

问题是您要将所有从服务器回显的输出复制到输入框。 由于http://your-siteurl/admin_c/get_values_c的输出包含<br>标记,因此输入框将尝试打印。 html输入框不呈现html元素。它只是打印html标签,如果有的话。

为了做你想做的事,我建议进行这些编辑。

第一个在控制器页面 - &gt; admin_c.php ,在内爆功能之前,使用:

foreach ($res as $key => &$value){
 $value = "<div class='innerelement'>".$value."</div>";
}
echo implode("<br>",$res);

使用此代码替换你的jquery click功能:

$("#show_ename").on("click",".innerelement", function(){
  var ename_value = $(this).html();
  $('#ename').val(ename_value);
  $(this).html('');
  $('#show_ename .innerelement').hide();
});

请注意,在url:'<?php echo site_url()."/admin_c/get_values_c";?>'中,在siteurl()函数调用替换之后会有一个额外的“/”,如下所示:
url:'<?php echo site_url()."admin_c/get_values_c";?>'
或使用
url:'<?php echo site_url('admin_c/get_values_c');?>