从实时搜索中选择建议,并在输入类型标记

时间:2016-12-09 20:40:00

标签: jquery drop-down-menu

我已经成功创建了实时搜索,但现在我想在搜索后从可用建议中选择任何一个建议并将其显示为html的输入类型标记。我使用jquery结合codeigniter。所以,下面是包含jquery的控制器,模型和视图的代码。

控制器/ users.php:

public function live_search()
        {
            $search=  $this->input->post('customer_name');
            $query = $this->User_model->getCustomer($search);
            echo json_encode ($query);
        }

模型/ User_model.php:

function getCustomer($search)
        {
            $this->db->select('customer_name');
            $this->db->like('customer_name', $search, 'both');
            $this->db->from('customer_details');
            $query = $this->db->get();
            return $query->result();
        }

查看:

<script>
        $(document).ready(function()
        {
            $("#customer_name").keyup(function()
            {
                if($("#customer_name").val().length>2)
                {
                    $.ajax({
                        type: "post",
                        url: "http://127.0.0.1/atop/live_search",
                        cache: false,    
                        data:'customer_name='+$("#customer_name").val(),
                        success: function(response){
                        $('#finalResult').html("");
                        var obj = JSON.parse(response);
                        if(obj.length>0)
                        {
                            try
                            {
                                var items=[];  
                                $.each(obj, function(i,val)
                                {           
                                    items.push($('<ul/>').text(val.customer_name));
                                }); 
                                $('#finalResult').append.apply($('#finalResult'), items);
                            }
                            catch(e) 
                            {  
                                alert('Exception while request..');
                            }  
                        }
                        else
                        {
                            $('#finalResult').html($('<ul/>').text("No Data Found"));  
                        }},
                        error: function()
                        {     
                            alert('Error while request..');
                        }
                });
            }
            return false;
            });
            });
    </script>
<div class="col-md-12">
                        <label>Customer Name:</label><br>
                        <input type="text" name="customer_name"               id="customer_name">
                        <ul id="finalResult"></ul>
                    </div>

所以,我怎么能得到它?

1 个答案:

答案 0 :(得分:1)

您可以使用ajax从this链接找到自己的方式。