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

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 2

<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);
           }

如果这是你的情况

Answer 3

希望对您有所帮助:

确保你已经在你的文件中加载了必要的 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>

你的 return 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",
    });

});

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

How do I display the list in the textbox after success response from ajax

php

ajax

jquery

codeigniter

jquery-ui-autocomplete