Question

然后我有一个从db恢复并转为json的省份列表。 All'autocomplete我服务这个文件province.php返回所有省份的列表。该文件显示所有省份的简单查询SELECT * FROM provinces。

我被迫选择此路径以便将此缓存结果放在一起，并避免仅对省的选择进行数据库查询。

真正的问题是什么？

自动完成工作以他自己的方式工作，或者确实看到从文件中提取的所有省份省份.php的列表，但它无法过滤结果。

所以如果我写MILA ...应该只显示那些寄宿者与MILA的省份...因为相反总是给我整个清单？

<script>
  $(function() {
    $( "#province" ).autocomplete({
      source: 'province.php'
    });
  });
</script>

文件province.php返回如下内容：

{ “0”：{ “ID”： “1”， “标签”： “米兰”， “值”： “米兰”}， “1”：{ “ID”： “2”， “标签” ： “卡利亚里”， “值”： “卡利亚里”}， “2”：{ “ID”： “3”， “标签”： “墨西”， “值”： “墨西”}， “5”：{” ID “：” 4" ， “标签”： “罗马”， “值”： “罗马”}， “6”：{ “ID”： “5”， “标签”： “威尼斯”， “值”：”威尼斯“}}

好像我这样做有效：

<script>
  $(function() {
    var province = [
      { label: "milano", value: "milano", id: 1 },
      { label: "Cagliari", value: "Cagliari", id: 2 },
      { label: "Messina", value: "Messina", id: 3 },
      { label: "Roma", value: "Roma", id: 4 },
      { label: "Catania", value: "Catania", id: 5 },
      { label: "Venezia", value: "Venezia", id: 6 }
    ];
    $( "#tags" ).autocomplete({
      source: province
    });
  });
  </script>

为什么？

Answer 1

您可以尝试使用for..in将对象解析为您需要的[]，如下所示：

// The following object masquerades as an array.
var fakeArray = {
    "0": {
        "id": "1",
            "label": "Milano",
            "value": "Milano"
    },
        "1": {
        "id": "2",
            "label": "Cagliari",
            "value": "Cagliari"
    },
        "2": {
        "id": "3",
            "label": "Messina",
            "value": "Messina"
    },
        "5": {
        "id": "4",
            "label": "Roma",
            "value": "Roma"
    },
        "6": {
        "id": "5",
            "label": "Venezia",
            "value": "Venezia"
    }
}

var realArray = [];

for (var i in fakeArray) {
    realArray.push(fakeArray[i]);
}

现在realArray将包含您需要的格式的数据：

[
    {
        "id": "1",
        "label": "Milano",
        "value": "Milano"
    },
    {
        "id": "2",
        "label": "Cagliari",
        "value": "Cagliari"
    },
    {
        "id": "3",
        "label": "Messina",
        "value": "Messina"
    },
    {
        "id": "4",
        "label": "Roma",
        "value": "Roma"
    },
    {
        "id": "5",
        "label": "Venezia",
        "value": "Venezia"
    }
]

现在，您需要做的就是，

$("#test").autocomplete({
    source: realArray
})

假设#test是文本框的ID。

演示：http://jsfiddle.net/hungerpain/rNzpg/1/

修改： 如果您的数据来自php文件，请先使用getJSON获取数据：

$.getJSON('province.php').done(function(result) {
   fakeArray = result ; 

   var realArray = [];

   for (var i in fakeArray) {
        realArray.push(fakeArray[i]);
   }

    $("#test").autocomplete({
      source: realArray
    });  

});

PHP ：要使代码本身循环，您的PHP代码必须构造一个这样的数组：

 var $array = array();
 foreach ($province as $provincia) { 
   array_push($array, $province);
 } 

 echo json_encode($array)

一定要有：header（'Content-type：application / json'）;

然后你的JS看起来很简单：

 $( "#tags" ).autocomplete({
      source: "province.php"
 });

希望这有帮助！

Answer 2

尝试

$(function() {
    $("#province").autocomplete({
        source : function(request, response) {
            $.getJSON('province.php').done(function(result) {
                var regex = new RegExp(request.term, 'i');

                var array = $.map(result, function(item, idx) {
                    if(!regex.test(item.label)){
                        return;
                    }

                    return {
                        label : item.label,
                        value : item.value,
                        id : item.id
                    }
                });
                response(array)
            });
        }
    });
});

自动完成在Jquery中不起作用

2 个答案: