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

希望这对您有帮助：

确保像这样在文件中加载了必要的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 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);
           }

如果这是您的情况

ajax

3 个答案: