0

JQuery のオートコンプリート テキスト ボックスを使用して、州によってフィルター処理された配列から郡データを表示するスクリプトを作成しようとしています。状態はドロップダウン リストです。たとえば、ユーザーが州として「イリノイ」を選択した場合、ユーザーがテキスト ボックスに入力した物乞いの文字に基づいて、autocompklete が最も近い郡名を表示します。状態ごとに配列をフィルタリングし、正しいデータを配列にロードすることに成功しましたが、配列をオートコンプリートにロードしようとすると問題が発生します。これがコードセグメントです。ご協力ありがとうございました:

    <body >
    <script type="text/javascript">


    function findCounties(State)
      {
var County = new Object();

var xmlhttp;
if (window.XMLHttpRequest)
{
    // code for IE7+, Firefox, Chrome, Opera, Safari

     xmlhttp = new XMLHttpRequest();
}
else
{
    // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

if (xmlhttp != null)
{
    xmlhttp.open("GET","US_Counties.csv",false); // the false makes this synchronous!
    xmlhttp.send();
    var text = xmlhttp.responseText;

    // text contains the ENTIRE CONTENTS of the text file
    // you *could* just write those contents directly to the HTML output:


    // but you might want to process that one line at a time.  if so:
    var lines = text.split("\n");

    var cntCounty = 0;
        for (var n=0; n<lines.length; n++)
        {
            if(lines[n].indexOf(State) > 0){
                var line = lines[n];
                var populate = line.split(',');


                County[cntCounty] = populate[1];
                cntCounty++;

            }//IF
        }//for
    $(function() {
            var Counties = [{
         a_state: []
        };
        for(var i in County) {

        var item = County[i];

            Counties.a_state.push({ 
            "label" : item.County
        "value" : item.County`enter code here`
        });
    ];

  j$("#counties").autocomplete({
    source: Counties 
  }).data("autocomplete")._renderItem = function(ul, item) {
    return $("<li>").data("item.autocomplete", item).append("<a>" + item.label ++ "</a>").appendTo (ul);
});
4

1 に答える 1

0

私はこのJavaScriptコードを使用しました：

var stateList, countyList;

$(document).ready( function() {
    $.ajax({type: "GET",
            url: "US_counties.csv", // list of counties
            cache: false,
            error: function (xhr, textStatus, errorThrown) {
                window.alert(textStatus);
            },
            success: function (text, textStatus, xhr) {
                var s1 = $('#s1')[0]; // the select box
                stateList = [];
                // each line has one county on it
                $.each(text.split("\n"), function (ix, elt) {
                    var items = elt.split(','),
                        stateName = items[0],
                        countyName = items[3], a;
                    if (typeof stateList[stateName] == 'undefined') {
                        a = [];
                        a.push(countyName);
                        stateList[stateName] = a;
                        // add state to the select box
                        s1.options[s1.options.length] = new Option(stateName, stateName);
                    }
                    else {
                        stateList[stateName].push(countyName);
                    }
                });

                // set the change event handler for the dropdown
                $('#s1').bind('change', function() {
                    countyList = stateList[this.value];
                    $("#t1") // the text box
                        .autocomplete({ source: countyList })
                        .val('');
                });

                // trigger a 'fake' change, to set up the autocomplete
                $('#s1').trigger('change');
            }});
});

説明:stateListリストのリストです。そのリストの内側のインデックスは州名、または私の場合は州の略語 (AL、AK、A​​Z など) です。の各項目stateListは文字列のリストで、それぞれがその州の郡の名前です。

コードの機能:

  • ドキュメント準備完了イベントの関数を登録します。
  • その関数で、郡リストの CSV を ajax 経由で取得します。
  • その ajax 呼び出しの成功コールバックで、結果を解析します。新しい状態ごとに、項目を にstateList追加し、その状態をド​​ロップダウンに追加します。その州の郡のリストに郡を追加します。また、変更イベント ハンドラーをドロップダウンにバインドします。
  • 変更ハンドラーで、「郡名」テキストボックスにオートコンプリートを適用します。ソースは、ドロップダウンで選択された州の郡名のリストです。

編集- 参考までに、このリストから郡のリストを取得し、タブをコンマに置き換えただけです。タブをコンマに置き換える必要はありませんでしたが、テキスト エディターでリストを参照しやすくなりました。タブをコンマに置き換えない場合は、呼び出しをelt.split()タブ文字で分割するように変更する必要があります。

于 2012-04-17T05:00:59.130 に答える