0

次に、db から回復して json に変換する州のリストを取得します。 All'autocomplete 私は、すべての州のリストを返すこのファイル Province.php を提供します。このファイルは、単純なクエリ SELECT * FROM Provinces を使用してすべての州を表示します。

このキャッシュされた結果を配置し、州の選択に対してのみデータベースクエリを実行しないようにするために、このパスを選択する必要がありました。

本当の問題は何ですか？

そのオートコンプリートは独自の方法で機能するか、ファイルから抽出されたすべての州の Province.php のリストを表示しますが、結果をフィルタリングすることはできません。

MILA と書くと ... MILA に隣接する州のみを表示する必要があります .. 代わりに、常にリスト全体を表示するのでしょうか?

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

Province.php ファイルは次のようなものを返します。

{"0":{"id":"1","label":"Milano","value":"Milano"},"1":{"id":"2","label":"カリアリ","value":"カリアリ"},"2":{"id":"3","label":"メッシーナ","value":"メッシーナ"},"5":{"id": "4","label":"Roma","value":"Roma"},"6":{"id":"5","label":"Venezia",​​"value":"Venezia"} }

代わりにこれを行うかのように動作します：

<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>

なぜ？

4

2 に答える 2

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

お役に立てれば！

于 2013-07-26T08:19:43.270 に答える
0

試す

$(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)
            });
        }
    });
});
于 2013-07-26T08:10:14.757 に答える