0

jQuery.csv (または xml など) ファイルから情報をフィルター処理するオートコンプリート スクリプトを作成する必要があり、結果を選択するとすべての情報が表示されます。
私が理解していることから、私は一日中勉強していて、解決策を望んでいたjqueryオートコンプリートスクリプトを使用する必要があります。
コーディングの基本的な知識があり、テキスト ファイルから結果をフィルター処理するためにこれが必要になります。
テキスト ファイル .csv の例は次のとおりです。

"UK", "info1", "info2", "info2", "info3"
"ITALY", "info1", "info2", "info2", "info3"
"etc", "info1", "info2", "info2", "info3"

したがって、ユーザーが UK と入力するとフラグも表示され、UK をクリックすると info1,2,3 が表示されます。
このような作業が必要であることは理解していますが、geo xml を独自の xml、csv などのファイルに置き換えるにはどうすればよいですか?
http://jqueryui.com/autocomplete/#remote-jsonp
また、どのようにしてフラグをロードできるのでしょうか?

このコード例では、2 つの値を持つ txt ファイルからフィルター処理します。 "12": "Italy", どうすればさらに追加できますか?
例 :機能し"12": "125": "54": "Italy",ません
。旗の画像を追加してロードするにはどうすればよいですか?
完全な js は次のとおりです。

$(function () {
    'use strict';

    // Load countries then initialize plugin:
    $.ajax({
        url: 'content/countries.txt',
        dataType: 'json'
    }).done(function (source) {

        var countriesArray = $.map(source, function (value, key) { return { value: value, data: key }; }),
        countries = $.map(source, function (value) { return value; });

        // Setup jQuery ajax mock:
        $.mockjax({
            url: '*',
            responseTime:  200,
            response: function (settings) {
                var query = settings.data.query,
                queryLowerCase = query.toLowerCase(),
                suggestions = $.grep(countries, function(country) {
                    return country.toLowerCase().indexOf(queryLowerCase) !== -1;
                }),
                response = {
                    query: query,
                    suggestions: suggestions
                };

                this.responseText = JSON.stringify(response);
            }
        });

        // Initialize ajax autocomplete:
        $('#autocomplete-ajax').autocomplete({
            serviceUrl: '/autosuggest/service/url',
            onSelect: function(suggestion) {
                $('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
            }
        });

        // Initialize autocomplete with local lookup:
        $('#autocomplete').autocomplete({
            lookup: countriesArray,
            onSelect: function (suggestion) {
                $('#selection').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
            }
        });

        // Initialize autocomplete with custom appendTo:
        $('#autocomplete-custom-append').autocomplete({
            lookup: countriesArray,
            appendTo: '#suggestions-container'
        });

    });

});


そして、ここにhtmlがあります：

    <h2>Ajax Lookup</h2>
    <p>Type country name in english:</p>
    <div>
        <input type="text" name="country" id="autocomplete-ajax"/>
    </div>
    <div id="selction-ajax"></div>

    <h2>Local Lookup</h2>
    <p>Type country name in english:</p>
    <div>
        <input type="text" name="country" id="autocomplete"/>
    </div>
    <div id="selection"></div>

    <h2>Custom Lookup Container</h2>
    <p>Type country name in english:</p>
    <div>
        <input type="text" name="country" id="autocomplete-custom-append" style="float: left;"/>
        <div id="suggestions-container" style="position: relative; float: left; width: 400px; margin: 10px;"></div>
    </div>
</div>

<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mockjax.js"></script>
<script type="text/javascript" src="src/jquery.autocomplete.js"></script>
<script type="text/javascript" src="scripts/demo.js"></script>

4

0 に答える 0