Question

设置jQuery Autocomplete这么简单对我来说不起作用为什么我对此感到陌生，请你检查这个问题是什么？

Jquery功能

$("#location_suggetion").autocomplete({
    autoFocus: true,
    minLength: 1,
    source: function(request,response) {
        $.ajax ({
            url: base_url+'data_check/get_location',
            data: {term: request.term},
            dataType: "jsonp",
            cache: false,
            success: function(data) {
                response( $.map( data.suggestions, function( item ) {
                    return {
                        label: item,
                        value: item
                    }
                }));    
            } 
        });
    },
});

PHP文件代码

$term = $this->input->get('term');
$query = $this->db->query('SELECT * FROM `tb_cities` WHERE name LIKE "'.$term.'%" LIMIT 0,6');
$results = $query->result();
$html = '';
$html.= '[';
foreach($results as $result){
    $html.= '{ label: "'.$result->name.', '.get_country_row($result->country_id)->name.'", value: "'.$result->name.'" },';
}
$html.='];';

echo $html;

控制台获取结果

[{ label: "Rangat, India", value: "Rangat" },{ label: "Rajahmundry, India", value: "Rajahmundry" },{ label: "Rajamahendri, India", value: "Rajamahendri" },{ label: "Rajampet, India", value: "Rajampet" },{ label: "Rajendranagar, India", value: "Rajendranagar" },{ label: "Rajoli, India", value: "Rajoli" },];

Answer 1

jsonp用于cross domain请求。请改用json。您在控制台中的JSON日期是错误的检查here。要使用json_encode转换JSON字符串中的数组。将您的PHP代码更改为：

$term = $this->input->get('term');
$query = $this->db->query('SELECT * FROM `tb_cities` WHERE name LIKE "'.$term.'%" LIMIT 0,6');
$results = $query->result();

$html= array();$i=0;

foreach($results as $result){
    $html[$i]['label']=$result->name.', '.get_country_row($result->country_id)->name;

  $html[$i]['value']=$result->name;
$i++;
}
echo json_encode($html);

这可以直接使用，无需在jquery部分进行转换，因为结构已经匹配。

Answer 2

当你看到你试图回应的字符串时。您会注意到它不是有效的json。它以括号

之前的逗号结尾

// This is valid
[
  { label: "Rajoli, India", value: "Rajoli" }
]

//this is invalid
[
  { label: "Rajoli, India", value: "Rajoli" },
]

替代自己创建它可以使用json_encode函数将php数组解析为json

foreach($results as $result){
    $data[] = [
               "label" => $result->name.', '.get_country_row($result->country_id)->name, 
               "value" =>$result->name
    ];
}
//Now parse to json
echo json_encode($data);

您还可以决定哪一方使格式正确{"label": "some string", "value": "data"}

第二个问题可能与您尝试将$.map标签和值放入对象

有关

$("#location_suggetion").autocomplete({
    autoFocus: true,
    minLength: 1,
    source: function(request,response) {
        $.ajax ({
            url: base_url+'data_check/get_location',
            data: {term: request.term},
            dataType: "json", // This is right
            cache: false,
            success: function(data) {
                response( data); // already mapped in backend
            } 
        });
    },
});

Answer 3

我认为问题出在你的PHP代码返回的JSON格式中。试试这个：

<script>
    $(function(){
        var arr = [];
        var availableTags = [];

        $.ajax({
            'url'   : 'getdata.php',
            'method': 'get',
            success : function(response){
                arr = JSON.parse(response);

                availableTags = Object.keys(arr).map(function (key) { return arr[key]; });
            },
            async   : false
        });

        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });  
    </script>

腓：

 <?php
    require('connect.php');

    $getDetails = "SELECT id, concat(first_name,' ',last_name) as name FROM test.datatables_demo";
    $details    = mysqli_query($con, $getDetails);

    $response = array();
    if(mysqli_num_rows($details) > 0)
    {
        while($row = mysqli_fetch_assoc($details))
        {
            $response[$row['id']] = $row['name'];
        }
    }

    echo json_encode($response);
?>

Answer 4

Conver Array至Json

$term = $this->input->get('term');
$query = $this->db->query('SELECT * FROM `tb_cities` WHERE name LIKE "'.$term.'%" LIMIT 0,6');
$results = $query->result();
$html = array();
foreach($results as $result){
    $html[]= array("label" => $result->name.",".get_country_row($result->country_id)->name,
                  "value" => $result->name);
}

echo json_encode($html,JSON_FORCE_OBJECT);

使用Ajax Suggetion的jQuery自动完成不返回

4 个答案: