jQuery自动完成不显示返回数据的ajax请求

时间:2022-10-24 21:34:02

When I see on the debug developer tool ajax request responded with data but the data is not rendered in the text box. The data contains some special characters as you can see in the picture.

当我在debug developer工具上看到ajax请求响应了数据,但是数据没有在文本框中呈现。数据包含一些特殊的字符,你可以在图片中看到。

What is exactly wrong with the response function ? What (like utf-8 encoding maybe) should I add to the ajax call to display the special character ?

响应函数到底有什么问题?我应该向ajax调用中添加什么(比如utf-8编码)来显示特殊字符?

jQuery自动完成不显示返回数据的ajax请求

html:

html:

<select name="selCat">
    <option>....</option>
</select>

<input class="col-3" type="text" id="txtPOI" name="txtPOI" />

jquery:

jquery:

$("#txtPOI").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '<?php echo site_url("crowd/get_POIs") ?>',
                data: {cat: selectedCode, q: request.term},
                dataType: "json",
                type: "post",
                success: function(data) {
                    response(data);
                },
                fail : function ( jqXHR, textStatus, errorThrown ) {
                    console.log(jqXHR);
                    console.log(textStatus);
                    console.log(errorThrown);
                },minLength: 3
            });
        }
    });

Controller :

控制器:

function get_POIs(){
        $cat = $this->input->post('cat');
        $q = $this->input->post('q');
        //echo $cat;

        if (isset($cat) && isset($q)){
            $cat = strtolower($cat);
            $q = strtolower($q);
            $data=$this->crowd->get_POIs($cat,$q);
            //echo "aa";
            $a_json = array();
            if(count($data) > 0){
                foreach ($data as $row){
                      $a_json_row["title"] = $row->title;
                      $a_json_row["contentid"] = $row->contentid;
                      $a_json_row["latitude"] = $row->latitude;
                      $a_json_row["longitude"] = $row->longitude;
                      array_push($a_json, $a_json_row);

                }
                echo json_encode($a_json);
            }   
        }

    }

Model :

模型:

function get_POIs($cat, $q){

    $this->db->DISTINCT();
    $this->db->select('title, a.contentid, latitude, longitude, address');
    $this->db->from('attraction a');
    $this->db->join('geographicdata g', 'a.contentid = g.contentid', 'left');
    $this->db->where('cat3 = "'.$cat.'"');
    $this->db->where('title like "%'.$q.'%"');
    $this->db->order_by('title','ASC');
    $query = $this->db->get()->result();
    //die(var_dump($query));
    //echo $this->db->get_compiled_select();
    return $query;
}

1 个解决方案

#1


2  

I managed to solve this problem by modifying the code inside the success event. Here how I did it.

通过修改成功事件中的代码,我成功地解决了这个问题。我是这么做的。

change from

改变

success: function(data) {
                response(data);
            }

to

success: function(data) {

            response( $.map( data, function( item )
            {
                return{
                        label: item.title,
                        value: item.title,
                        contentid: item.contentid,
                        latitude: item.latitude,
                        longitude: item.longitude
                    }
            }));

 }

#1


2  

I managed to solve this problem by modifying the code inside the success event. Here how I did it.

通过修改成功事件中的代码,我成功地解决了这个问题。我是这么做的。

change from

改变

success: function(data) {
                response(data);
            }

to

success: function(data) {

            response( $.map( data, function( item )
            {
                return{
                        label: item.title,
                        value: item.title,
                        contentid: item.contentid,
                        latitude: item.latitude,
                        longitude: item.longitude
                    }
            }));

 }