ajax成功响应后如何在文本框中显示列表

Question

我正在使用 CodeIgniter。我正在使用有效的 ajax 创建实时自动完成 textbox。我签入了网络选项卡，还在成功的 ajax 中添加了警报。我得到了正确的输出。

现在，当用户输入文本时，如何在文本框中显示列表？我应该使用 Json 以及如何使用？

当用户在文本框中输入任何字母时，我必须显示名称列表。

你能帮我解决这个问题吗？

我的观点

<input type="text" name="cust_name" placeholder="Enter the name" class="form-control" id="title">

Ajax

$(document).ready(function(){
            $('#title').autocomplete({
                source: baseUrl + "/Search/get_search_record",
                select: function (event, ui) {
                    $('#title').val(ui.item.label); 
                }
            });

        });

控制器

public function get_search_record(){
    if (isset($_GET['term'])) {
         $result=$this->Search_model->search_cust_name($_GET['term']);
        if (count($result) > 0) {
        foreach ($result as $row)
            $arr_result[] = array(
                'first_name' => $row->first_name,
                'last_name' => $row->last_name,
            );
            echo json_encode($arr_result);
        }
    }


}

型号

public function search_cust_name($emp_name){
         $this->db->like('first_name', $emp_name , 'both');
        return $this->db->get('members')->result();

}

当我输入任何文本时，我会得到这样的结果。

我正在网络选项卡中获取输出

[{"first_name":"Naren","last_name":"Verma"}]

Answer 1

希望对您有所帮助：

确保您已在文件中加载了必要的 js 和 css，如下所示：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

你的回报data 应该是这样的array 形式

['tarun verma','test sur','first last']

查看工作演示：https://jsfiddle.net/xpvt214o/269229/

在控制器get_search_record 中应该是这样的：

public function get_search_record()
{
    if (isset($_GET['term'])) 
    {
        $result=$this->Search_model->search_cust_name($_GET['term']);
        if (count($result) > 0) 
        {
            foreach ($result as $row) 
            {
               $arr_result[] = $row->first_name .' '. $row->last_name;
            }
            print_r($arr_result);
            exit;
         }

      }
}

js应该是这样的：

$(document).ready(function(){
     $('#title').autocomplete({
        source: baseUrl + "/Search/get_search_record",
    });

});

Answer 2

HTML

<input list="employee_name">

<datalist id="employee_name"> </datalist>

AJAX

$(document).ready(function() {
    $("#employee_name").keyup(function() {
       var emp_name = $('#employee_name').val();
       if (emp_name != '') {
           $.ajax({
              type: "POST",
              url:baseUrl + "/Employee_control/search_with_emp_name",
              data: {
                 emp_name: emp_name
              },

              success: function(data) {
                 alert(data);

                 $('#employee_name').html('');
                  for(i=1; i<=data.length; i++)
                  {
                      $('#employee_name').append('<option value="+data[i]+">');
                  }

               }
           });
        }
    });
});

Answer 3

<textarea name="my_textarea" id="my_id" cols="30" rows="10"></textarea>

           success: function(data) {
           var string_of_array = data.join("\n");
            $('#my_id').val(string_of_array);
           }

如果这是你的情况